Dropdown
ボタンを押すとパネルが開く機能の抽象コンポーネントです。大きく分けるとパネルを開くための引き金となるDropdownTriggerとパネル自体を指すDropdownContentから構成されます。
Dropdownを使用したコンポーネント
開発で頻繁に利用する実装をコンポーネント化しています。
DropdownMenuButton
複数の操作をまとめて提供するためのコンポーネントで、パネル内には操作がリスト形式で表示されます。
FilterDropdown
一覧の絞り込みを行なうためのコンポーネントで、パネル内に自由に入力要素を配置できるほか、絞り込みを適用したり解除したりするための機能も有しています。
SortDropdown
主に表の並べ替え操作を統一するためのコンポーネントです。並べ替え項目と並び順を指定でき、ボタンラベルとアイコンで現在の並び順を表します。
Props
DropdownContent props
controllable
false true
true
のとき、ドロップダウン内のコンテンツをクリックしてもドロップダウンが閉じなくなる。。
この場合は、 DropdownCloser
を用いてドロップダウンを閉じることができる。