並び替えSortButtonExperimental
ソート順を切り替えるボタンです。
プレビュー
状態とバリエーション
未指定
クリックすると昇順、降順、未指定の順に切り替わります。
昇順
現在の並び替え方向をアイコンとラベルで示します。
無効化
並び替えできない理由はツールチップで伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | "asc" | "desc" | "none" | "none" | 現在の並び替え方向です。 |
| onSortChange | (value: "asc" | "desc" | "none") => void | - | 並び替え方向が変わった時に呼ばれます。 |
| label | string | "Sort" | ボタンに表示するラベルです。 |
| disabled | boolean | false | 並び替えできない状態にします。理由はツールチップで補足します。 |
使い方
import * as React from "react";
import { SortButton, type SortButtonVariantKey } from "@gunjo/ui";
export function SortExample() {
const [sort, setSort] = React.useState<SortButtonVariantKey>("none");
return (
<SortButton
value={sort}
onSortChange={setSort}
label="登録日"
className="flex-row"
/>
);
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。