Clay Dropdown Menus and Action Menus

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

ドロップダウンメニューは、clay:dropdown-menu taglibおよびclay:actions-menu taglibを介してアプリに追加できます。 Clay taglibは、選択できるいくつかのメニューバリエーションを提供します。両方のtaglibをいくつかの例とともに以下に示します。

基本的なドロップダウンメニュー：

<clay:dropdown-menu
	items="<%= dropdownsDisplayContext.getDefaultDropdownItems() %>"
	label="Default"
/>

Clay taglibは、アプリにドロップダウンメニューを追加するために必要なものを提供します。

この場合、ドロップダウンメニューの項目は 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 taglibを使用してアクションメニューを作成することもできます。

アクションメニューでは、ユーザーにヘルプテキストを表示することもできます。

<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() %>"
/>

アクションメニューでヘルプテキストを提供できます。