並び替えSortButtonExperimental

ソート順を切り替えるボタンです。

プレビュー

状態とバリエーション

未指定

クリックすると昇順、降順、未指定の順に切り替わります。

昇順

現在の並び替え方向をアイコンとラベルで示します。

無効化

並び替えできない理由はツールチップで伝えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
value"asc" | "desc" | "none""none"現在の並び替え方向です。
onSortChange(value: "asc" | "desc" | "none") => void-並び替え方向が変わった時に呼ばれます。
labelstring"Sort"ボタンに表示するラベルです。
disabledbooleanfalse並び替えできない状態にします。理由はツールチップで補足します。

使い方

import * as React from "react";
import { SortButton, type SortButtonVariantKey } from "@gunjo/ui";

export function DateJoinedSortButton() {
  const [sort, setSort] = React.useState<SortButtonVariantKey>("none");

  return (
    <SortButton
      value={sort}
      onSortChange={setSort}
      label="登録日"
      className="flex-row"
    />
  );
}

設計の判断

  • 押すたびに3つの状態を回す。昇順・降順・並べ替えなし、を1つのボタンで回します。資料は「1つのボタンに1つの動詞」を求めていますが、並べ替えは切り替えなので、ボタンを3つ並べるより1つを回すほうが場所を取りません。いまの状態は3種類のアイコンで出しています。
  • いまの状態を読み上げに伝えるところは、まだ書いていません。aria-pressed も aria-sort も付いていないので、画面を見ていない人にはラベルの「並べ替え」までしか届きません。表の見出しで使うときは、aria-sort を持つ DataTable の見出しを使ってください。この部品を単体で直すか、表の見出し専用にするかは、まだ決めていません。
  • 既定は控えめな見た目にした。variant の既定は ghost、size は sm です。資料は「Primary は1画面に1つまで」を挙げています。並べ替えは画面の主役ではないので、ツールバーの中で目立たない側に置きました。ラベルは label で差し替えられます。
    一般のボタンの設計は UIXHERO の「ボタン」にあります。

使用コンポーネント

SortButtonButton

関連コンポーネント

FilterButtonTableCommand

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Sort ButtonUIXHERO: ボタン（Button）