ツールピルToolPillExperimental

編集ツールやモード切り替えを、ツールチップ付きのアイコンピルとして表示します。

プレビュー

状態とバリエーション

横並びツールバー

横並びでは、隣のアイコンに重ならないようツールチップを上に出します。

縦並びツールバー

縦並びでは tooltipSide を right または left にして、上下のツールを隠さないようにします。

操作の種類

通常操作、主要操作、削除などの危険操作で variant を切り替えます。

選択中

現在のモードや選択中ツールは isActive で固定表示します。

サイズ

周辺 UI の密度に合わせてアイコンボタンの大きさを変えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
iconComponentType-表示するアイコンコンポーネントです。
labelstring-支援技術に伝える名前とツールチップに表示する文言です。
isActivebooleanfalse現在選択されているツールとして表示します。
variant"danger" | "primary" | "secondary""primary"通常操作、主要操作、危険操作の見た目です。
size"sm" | "md" | "lg""md"アイコンボタンの大きさです。
tooltipSide"top" | "right" | "bottom" | "left""top"ツールチップを出す方向です。横並びでは上または下、縦並びでは右または左を指定します。
onClickMouseEventHandler<HTMLButtonElement>-クリック時に呼び出されます。
classNamestring-必要に応じて外側に追加するクラスです。

使い方

import { ToolPill } from "@gunjo/ui";
import { IconArrowsMove as Move, IconPencil as PenLine, IconPointer as MousePointer2, IconTrash as Trash2 } from "@tabler/icons-react";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <ToolPill icon={MousePointer2} label="選択" isActive onClick={() => {}} />
      <ToolPill icon={Move} label="移動" onClick={() => {}} />
      <ToolPill icon={PenLine} label="編集" variant="primary" onClick={() => {}} />
      <ToolPill icon={Trash2} label="削除" variant="danger" onClick={() => {}} />
    </div>
  );
}

使用コンポーネント

ToolPillTooltip

関連コンポーネント

ButtonTooltipButtonIconTag