SmartHR Design System

FilterDropdown

「よくあるテーブル」などで絞り込み条件を入力するためのドロップダウンコンポーネントです。Checkbox/RadioButton/日付などの入力要素をドロップダウンパネル内に配置し、絞り込みの適用・解除を提供するときに使います。

使用上の注意

絞り込みのUIが複雑で、エリアを十分に確保できない場合はActionDialogを使用する

よくあるテーブルやその他一覧画面で絞り込みをするとき、パネル内にCheckboxやRadioButton、Input[type=date]などを配置することでユースケースを達成できる場合はFilterDropdownを使用してください。

絞り込みのUIが複雑で、ドロップダウンパネルではエリアを十分に確保できない場合、ActionDialogの使用を検討してください。その際、ActionDialogの呼び出しはFilterDropdownではなく「フィルター」ボタンを使用します。

レイアウト

[WIP] モバイル

モバイルで自動的に切り替わるようにコンポーネントを改修予定です。

ドロップダウンパネル

モバイル端末は画面が小さく誤操作しやすいため、ドロップダウンパネルはActionDialogを用いてモーダルに表示します。

使い方チェックリスト

FilterDropdown
参照元：使用上の注意 > 絞り込みのUIが複雑で、エリアを十分に確保できない場合はActionDialogを使用する 「使用上の注意 > 絞り込みのUIが複雑で、エリアを十分に確保できない場合はActionDialogを使用する」の本文へ移動
  • Must
    パネル内に Checkbox や RadioButton、Input[type=date] などを配置することでユースケースを達成できる場合は FilterDropdown を使用する
  • Should
    絞り込みの UI が複雑で、ドロップダウンパネルではエリアを十分に確保できない場合は ActionDialog の使用を検討する
    • ActionDialog の呼び出しは FilterDropdown ではなく「フィルター」ボタンで行う
参照元：レイアウト > [WIP] モバイル > ドロップダウンパネル 「レイアウト > [WIP] モバイル > ドロップダウンパネル」の本文へ移動
  • Must
    モバイル端末ではドロップダウンパネルを ActionDialog を用いてモーダルに表示する

Props

trigger
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { children: ReactNode; size?: ButtonProps; onlyIcon?: boolean | { component?: ComponentType<any>; }; }

引き金となるボタン

applyText
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
cancelText
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
resetText
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal
filtered
false true { iconAlt?: ReactNode; }
responseStatus
ResponseStatusWithoutProcessing { status: "processing"; }
onApply必須
MouseEventHandler<HTMLButtonElement>
onCancel
MouseEventHandler<HTMLButtonElement>
onReset
MouseEventHandler<HTMLButtonElement>
onOpen
() => void
onClose
() => void