Documentation

Documentation Menu
Go Back

Clayドロップダウンメニューとアクションメニュー

ドロップダウンメニューは、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() %>"
/>

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

Clay taglibを使用すると、アプリにドロップダウンメニューとアクションメニューを簡単に追加できます。

関連トピック