Clayドロップダウンメニューとアクションメニュー
ドロップダウンメニューは、clay:dropdown-menu taglibおよびclay:actions-menu taglibを介してアプリに追加できます。 Clay taglibは、選択できるいくつかのメニューバリエーションを提供します。 両方のtaglibをいくつかの例とともに以下に示します。
ドロップダウンメニュー
基本的なドロップダウンメニュー：
<clay:dropdown-menu
items="<%= dropdownsDisplayContext.getDefaultDropdownItems() %>"
label="Default"
/>
ドロップダウンメニューの項目は、そのJavaクラス（この場合はdropdownDisplayContext）で定義されます。 メニュー項目はNavigationItemオブジェクトです。 setDisabled(true)メソッドを使用してメニュー項目を無効にし、setActive(true)メソッドを使用してメニュー項目を有効にすることができます。 href属性はsetHref()メソッドで設定され、ラベルはsetLabel()メソッドで定義されます。 dropdownDisplayContextクラスの実装例を次に示します。
if (_defaultDropdownItems != null) {
return _defaultDropdownItems;
}
_defaultDropdownItems = new ArrayList<>();
for (int i = 0; i < 4; i++) {
NavigationItem navigationItem = new NavigationItem();
if (i == 1) {
navigationItem.setDisabled(true);
}
else if (i == 2) {
navigationItem.setActive(true);
}
navigationItem.setHref("#" + i);
navigationItem.setLabel("Option " + i);
_defaultDropdownItems.add(navigationItem);
}
return _defaultDropdownItems;
}
NavigationItemのタイプをTYPE_GROUPに設定し、項目を個別のArrayListにネストすることで、メニュー項目をグループにまとめることができます。 setSeparator(true)メソッドを使用して、グループを視覚的に分離するための水平セパレータを追加できます。 以下は、dropdownsDisplayContextクラスのコードスニペットです。
group1NavigationItem.setSeparator(true);
group1NavigationItem.setType(NavigationItem.TYPE_GROUP);
対応するtaglib：
<clay:dropdown-menu
items="<%= dropdownsDisplayContext.getGroupDropdownItems() %>"
label="Dividers"
/>
ドロップダウンメニューに入力を追加することもできます。 ドロップダウンメニューに入力を追加するには、setType()メソッド（NavigationItem.TYPE_CHECKBOXなど）を使用して入力のタイプを設定し、setInputName()メソッドを使用して名前を設定し、setInputValue()メソッドを使用して値を設定します。 以下に実装例を示します。
navigationItem.setInputName("checkbox" + i);
navigationItem.setInputValue("checkboxValue" + i);
navigationItem.setLabel("Group 1 - Option " + i);
navigationItem.setType(NavigationItem.TYPE_CHECKBOX);
対応するtaglib：
<clay:dropdown-menu
buttonLabel="Done"
items="<%= dropdownsDisplayContext.getInputDropdownItems() %>"
label="Inputs"
searchable="<%= true %>"
/>
メニュー項目にアイコンを含めることもできます。 メニュー項目にアイコンを追加するには、setIcon()メソッドを使用します。 以下に例を示します。
navigationItem.setIcon("check-circle-full")
対応するtaglib：
<clay:dropdown-menu
items="<%= dropdownsDisplayContext.getIconDropdownItems() %>"
itemsIconAlignment="left"
label="Icons"
/>
アクションメニュー
基本アクションメニュー：
<clay:dropdown-actions
items="<%= dropdownsDisplayContext.getDefaultDropdownItems() %>"
/>
アクションメニューでは、ユーザーにヘルプテキストを表示することもできます。
<clay:dropdown-actions
buttonLabel="More"
buttonStyle="secondary"
caption="Showing 4 of 32 Options"
helpText="You can customize this menu or see all you have by pressing \"more\"."
items="<%= dropdownsDisplayContext.getDefaultDropdownItems() %>"
/>
Clay taglibを使用すると、アプリにドロップダウンメニューとアクションメニューを簡単に追加できます。