[目次] [前へ: ツリーウィジェット] [次へ: 進捗メータ]

機能担当: Eric Vaughan

タブウィジェットはタブを使って異なるビューに切替える仕組みをユーザに提供する. タブそのものはtabcontrolタグを使って宣言する. tabcontrolはboxタグを拡張したものである (詳細はボックスシステムを参照されたし).

タブウィジェットにはhorizontalもしくは vertical アライメントがある. これはtabcontrolエレメントのalign属性を 使って指定する. タブウィジェットは2つの部品から構成される: タブボックスにはタブそのものが含まれている. -そしてタブパネル。これには他のタブが選択された時にビューに表示されたりビューから外されたりして 切替えられるコンテンツが含まれる.

タブボックスはtabboxタグを使って指定する. このタグもまたboxを拡張したものであり, align属性を使って,その子要素を横向き、 もしくは縦向きにアライメントを指定できる. 横向きのアライメントはタブをタブパネルの左右どちらかに置くときに, 縦向きのアライメントはタブをタブパネルの上下どちらかに置くときに使用する.

タブボックスはそれ自身別個に子エレメントとしてタブを持っており, tabタグを使って宣言する. タブはボックスでもあり,任意のコンテンツを中に含めることができる. デザイナはシンプルなテキストラベルから複雑でグラフィカルなタブまで なんでも創ることができる.

タブパネルを宣言するにはtabpanelタグを用いる. これの各子エレメントはそれぞれ独立のビューと見なされる. タブボックスに含まれるタブとタブパネルのビューは1対1に対応する. 例えば,(タブボックスの中にある)3番めのタブをクリックすると (タブパネルの中にある)3番目のビューが表示される.

<tabcontrol align="vertical"> <tabbox align="horizontal"> <tab>Tab One</tab> <tab>Tab Two</tab> <tab>Tab Three</tab> </tabbox> <tabpanel flex="100%"> <titledbutton value="View One"/> <titledbutton value="View Two"/> <titledbutton value="View Three"/> </tabpanel> </tabcontrol>

タブパネルの中で選択された要素はindex 属性を利用して コンテンツモデルの中に反映される. [現時点では, valueという属性が 代わりに利用される. これは間もなく変更されるはずだ] このインデックスはゼロベースである.

タブウィジェットの幅と高さには制限はない.このウィジェットは一番大きいビューのサイズに 合わせられる(そのビューが最初から表示されているかどうかは関係ない). 全てのビューはタブの幅と高さを決定するために流動的である(ウィジェットの幅と高さが既に 既定されていなければ)

タブパネルは独立してdeckタグを使ってタブコントロールを利用する. これによりタブの選択と,一番大きいビューのサイズに追従することが可能になっている.

タブにボーダースタイルを指定することも可能であり,自動的にビューの周りにタブのエッジから余白をもって 描画され,ビューといっしょにフラッシュされる.

既知の問題:

• プラットフォームネイティブのウィジェットと一緒に使うと表示上の問題があるので ネイティブウィジェットといっしょにタブコントロールを使うのは避けてほしい.
• これは複数行のタブを使うと現れる問題である.