clay:dropdown-menuおよび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を使用すると、アプリにドロップダウンメニューとアクションメニューを簡単に追加できます。