Toolbar

矢印キーで行き来するボタンのまとまり

インポート

ts
import { Toolbar } from '@k8ordo/ui';

使い方

Tab で入れるのは 1 つだけで、中は矢印キーで移ります（Home / End で端へ、無効な項目は飛ばす）。出て戻ると、最後にいた項目へ戻ります。各項目は Toolbar.Item の renderItem が渡す ref / tabIndex / onFocus を、Button や IconButton に広げて作ります。

tsx
<Toolbar.Root aria-label="Formatting">
  <Toolbar.Item
    renderItem={(props) => (
      <IconButton {...props} label="Copy">
        <CopyIcon size="sm" />
      </IconButton>
    )}
  />
  <Toolbar.Item
    renderItem={(props) => (
      <IconButton
        {...props}
        aria-pressed={isList}
        label="Bulleted list"
        onClick={toggleList}
      >
        <ListIcon size="sm" />
      </IconButton>
    )}
  />
  <Toolbar.Separator />
  <Toolbar.Item
    renderItem={(props) => (
      <Button {...props} size="sm">
        Save
      </Button>
    )}
  />
</Toolbar.Root>

トグル

押した状態は aria-pressed で渡します。ツールバーは押した項目の地を濃くします。

縦に並べる

tsx
<Toolbar.Root aria-label="Formatting" orientation="vertical">
  {/* … */}
</Toolbar.Root>

Props

Toolbar.Root

children?
Type: ReactNode
Default: -
orientation?
Type: 'horizontal'|'vertical'
Default: 'horizontal'
ref?
Type: Ref<HTMLDivElement>
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

Toolbar.Item

renderItem
Type: (props: ToolbarItemProps) => ReactElement
Default: -

Components