Home   Single Page

グループボックス

コンポーネント: groupbox.

グループボックスはコンポーネントをグループ化します。一グループにまとまっていることを示すため、ボーダーをコンポーネントの周りに表示します。

グループボックスのトップにまたがるラベルはcaptionコンポーネントを使用することで作成されます。HTMLのキャプション要素に似ています。

ウィンドウとは違い、グループボックスはIDスペースの所有者ではありません。また、オーバーラップにもポップアップにもなりません。

<groupbox width="250px">
    <caption label="Fruits"/>    
    <radiogroup>    
        <radio label="Apple"/>        
        <radio label="Orange"/>        
        <radio label="Banana"/>        
    </radiogroup>    
</groupbox>

デフォルトに加えて、グループボックスは三番目の型をサポートしています。三番目の型が使われると、simple-tabのタブボックスと同様の働きをします。
初めにopenプロパティによってコンテンツが参照可能かどうかを決定します。同様にして、onOpenイベントを受信したときにグループボックスのコンテンツを作成できます。

<groupbox mold="3d" open="true" width="250px">
    <caption label="fruits"/>    
    <radiogroup>    
        <radio label="Apple"/>        
        <radio label="Orange"/>        
        <radio label="Banana"/>        
    </radiogroup>    
</groupbox>

contentStyleプロパティとスクロール可能なグループボックス

contentStyleプロパティはグループボックスのコンテンツブロックにCSSスタイルを指定します。このため、以下のようにoverflow:auto(overflow:auto)を指定することでグループボックスをスクロール可能にします。

<groupbox mold="3d" width="150px" contentStyle="height:50px;overflow:auto">
    <caption label="fruits"/>    
    <radiogroup onCheck="fruit.value = self.selectedItem.label" orient="vertical">    
        <radio label="Apple"/>        
        <radio label="Orange"/>        
        <radio label="Banana"/>        
    </radiogroup>    
</groupbox>

【メモ】: デフォルトが使われているなら、contentStyleプロパティは無視されます。

contentStyleプロパティ中でheightはコンテンツブロック(キャプションは除く)のheightを意味します。
こうしてgroupboxを 外した場合(つまり、コンテンツブロックが参照可能ではない場合)グループブロックの高さは縮み、キャプションのみ残ります。
一方で、(heightプロ パティを使用して)グループボックス全体のheightを指定する場合は、グループボックスが解除されたとき、コンテンツブロックのみが消え、 height全体がそのまま残ります。