ドロップダウンとli

ドロップダウンメニューは、ユーザーが選択肢のリストから一つを選ぶことができるインターフェイス要素です。これを実現するための方法は複数ありますが、基本的なものとしてカスタムのドロップダウンメニューを作成する方法があります

基本的な使い方

• カスタムドロップダウンメニュー:

  “ul”と”li”要素を使って、カスタムのドロップダウンメニューを作成する方法もあります。

ドロップダウンメニューに対応したコントロールです。内部に［ボタン］と［ul］のコンポーネントも配置されます。

ボタンをクリックするとul で定義されたリストが表示されます。

※選択入力(コンボボックス)とは違いますので気を付けてください。

ulの中にliを挿入してください。(複数個可能) Add Dropdaown Dividerにチェックをつけることで水平線が表示されます。 liのなかには入力やラベルなどを挿入することが可能となります。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

<c-dropdown [visible]=”true” data-comp-id=”dropdown.1″ id=”dropdown.1″> <button cButton cDropdownToggle data-comp-id=”button.1″> Dropdown Button </button> <ul cDropdownMenu data-comp-id=”ul.1″></ul> </c-dropdown>