Dropdown

ボタンを押すとパネルが開く機能の抽象コンポーネントです。大きく分けるとパネルを開くための引き金となるDropdownTriggerとパネル自体を指すDropdownContentから構成されます。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

Dropdownを使用したコンポーネント

開発で頻繁に利用する実装をコンポーネント化しています。

DropdownMenuButton

複数の操作をまとめて提供するためのコンポーネントで、パネル内には操作がリスト形式で表示されます。

FilterDropdown

一覧の絞り込みを行なうためのコンポーネントで、パネル内に自由に入力要素を配置できるほか、絞り込みを適用したり解除したりするための機能も有しています。

SortDropdown

主に表の並べ替え操作を統一するためのコンポーネントです。並べ替え項目と並び順を指定でき、ボタンラベルとアイコンで現在の並び順を表します。

Props

DropdownContent props

controllable
falsetrue

true のとき、ドロップダウン内のコンテンツをクリックしてもドロップダウンが閉じなくなる。。
この場合は、 DropdownCloser を用いてドロップダウンを閉じることができる。

scrollable
falsetrue

true のとき、ウィンドウサイズに応じてドロップダウン内が自動的にスクロール可能になる