OOUI/要素/グループ

他のウィジェット（ボタンやオプションや入力欄やツールなどなど）を含んでいるOOUIウィジェットは全てGroupElementをミックスインしています。 アイテムの追加・除去・消去は全てGroupElementが提供するインターフェースを通して行われます。

共通の制限的な選択肢を含むSelectWidgetsはGroupElementをミックスインしているクラスのよく使われている一例です。 ButtonGroupWidgets, which are used when buttons are grouped logically, but are not mutually exclusive, are another example. StackLayouts も例の1つです。

グループ内の全てのアイテムはアイテム特有の参照によって関連付けられます。 もしアイテムが同じ参照を含むアイテムのあるグループに追加されれば、既存のアイテムは除去され、新しいアイテムが配列の末尾に追加されます。

以下の例はボタンを2つ含むButtonGroupWidgetです。 ボタンは作成されていますがDOMには追加されていないことに注意してください。 代わりに、それらの要素はウィジェットのitemsパラメータでボタングループに追加されています。 サポートされているメソッドと設定オプションの完全な一覧は、OO.ui.ButtonGroupWidgetのコード単位の解説文書をご覧ください。

// 例：GroupElementをミックスインしたButtonGroupWidget。GroupElementを
// ミックスインした他のクラスにはSelectWidgetsやStackLayoutsがあります。

// ボタンを作成します。このボタンがDOMに追加されるのは、後にグループが追加される時
// であることに注意してください。
var button1 = new OO.ui.PopupButtonWidget( {
  label: 'Select a category',
  icon: 'menu',
  popup: {
    $content: $( '<p>List of categories...</p>' ),
    padded: true,
    align: 'left'
  }
} );
var button2 = new OO.ui.ButtonWidget( {
  label: 'Add item'
})

// 新しいボタングループを作成しButtonGroupWidgetの設定オプション'item'
// を介してボタンを追加。
var buttonGroup = new OO.ui.ButtonGroupWidget( {
  items: [ button1, button2 ]
} );

// ボタングループをDOMに挿入。
$( 'body' ).append( buttonGroup.$element );

GroupElementミックスインクラスは、グループにウィジェットを追加したり、グループからウィジェットを除去・消去するための様々なメソッドを提供します。 サポートされているメソッドの完全な一覧は、GroupElementについてはOO.ui.mixin.GroupElementをご覧ください。

Aggregate events

You can invoke a GroupElement's aggregate method to tell it to listen to all its contained items for the event you specify, and in response emit a new event. For example, the ToolGroup uses this to disable itself when all its contained items are disabled. Also, a draggable group element listens to its items' drag and drop events (dragstart, dragend, drop) and emits a synthetic event to reorder its children.