ActionBar

ActionBarは、下部に表示されるアクションバーを表示するコンポーネントです。

<ActionBar.Root>
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

使い方

import { ActionBar } from "@yamada-ui/react"

import { ActionBar } from "@/components/ui"

import { ActionBar } from "@workspaces/ui"

<ActionBar.Root>
  <ActionBar.OpenTrigger />
  <ActionBar.Content>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger />
  </ActionBar.Content>
</ActionBar.Root>

propsを使う

<ActionBar.Root
  content={
    <>
      <Button variant="outline" borderStyle="dashed">
        2 Selected
      </Button>
      <ActionBar.Separator />
      <Button startIcon={<TrashIcon />}>Delete</Button>
      <Button startIcon={<ShareIcon />}>Share</Button>
      <ActionBar.Separator />
      <ActionBar.CloseTrigger>
        <CloseButton size="md" />
      </ActionBar.CloseTrigger>
    </>
  }
  trigger={<Button>Open ActionBar</Button>}
/>

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

<ActionBar.Root duration={0.4}>
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

配置を変更する

配置を変更する場合は、placementに"start-center"や"end-start"などを設定します。デフォルトでは、"end-center"が設定されています。

<ActionBar.Root placement="start-center">
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

アニメーションを変更する

表示または非表示のアニメーションを変更する場合は、animationSchemeに"block-start"や"inline-end"などを設定します。デフォルトでは、placementに基づいて設定されています。

<ActionBar.Root animationScheme="inline-end" placement="start-end">
  <ActionBar.OpenTrigger>
    <Button>Open ActionBar</Button>
  </ActionBar.OpenTrigger>

  <ActionBar.Content>
    <Button variant="outline" borderStyle="dashed">
      2 Selected
    </Button>
    <ActionBar.Separator />
    <Button startIcon={<TrashIcon />}>Delete</Button>
    <Button startIcon={<ShareIcon />}>Share</Button>
    <ActionBar.Separator />
    <ActionBar.CloseTrigger>
      <CloseButton size="md" />
    </ActionBar.CloseTrigger>
  </ActionBar.Content>
</ActionBar.Root>

制御する

const { open, onClose, onOpen } = useDisclosure()

return (
  <>
    <Button onClick={onOpen}>Open ActionBar</Button>

    <ActionBar.Root
      content={
        <>
          <Button variant="outline" borderStyle="dashed">
            2 Selected
          </Button>
          <ActionBar.Separator />
          <Button startIcon={<TrashIcon />}>Delete</Button>
          <Button startIcon={<ShareIcon />}>Share</Button>
          <ActionBar.Separator />
          <ActionBar.CloseTrigger>
            <CloseButton size="md" />
          </ActionBar.CloseTrigger>
        </>
      }
      open={open}
      onClose={onClose}
    />
  </>
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

ActionBar.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`closeOnEsc`	`true`	`boolean` If `true`, the action bar will close when the `Esc` key is pressed.
`content`	-	`ReactNode` The action bar content to use.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onCloseComplete`	-	`() => void` Callback function to run side effects after the action bar has closed.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`portalProps`	-	`Omit<PortalProps, "children">` Props to be forwarded to the portal component.
`trigger`	-	`ReactNode` The action bar trigger to use.

ActionBar.CloseTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.Content

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.OpenTrigger

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

ActionBar.Separator

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

アクセシビリティ

ActionBarは、アクセシビリティに関してWAI-ARIA - Dialog (Modal) Patternに従います。

キー	説明	状態
`Escape`	アクションバーを閉じます。	`open={true}` + `closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`ActionBar.Content`	`role="dialog"`	ダイアログであることを示します。
`ActionBar.OpenTrigger`	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-expanded`	アクションバーが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	アクションバーが開いている場合は、`ActionBar.Content`の`id`を設定します。
	`aria-label`	`"アクションバーを開く"`を設定します。
`ActionBar.CloseTrigger`	`aria-label`	`"アクションバーを閉じる"`を設定します。

類似のコンポーネント

NativePopoverは、HTML Popover APIを使用して要素の周りにフローティングして情報を表示するコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Tooltipは、要素の補足など短い情報を表示するコンポーネントです。

Drawerは、画面の端から表示されるパネルのコンポーネントです。

Menuは、一般的なドロップダウンメニューを表示するコンポーネントです。

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

使用しているコンポーネント・フック

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Portalは、現在のDOM階層の外側に要素をレンダリングするコンポーネントです。

useValueは、useBreakpointValueとuseColorModeValueを組み合わせたカスタムフックです。

useDisclosureは、一般的な開閉や切り替えのシナリオを処理するのに役立つカスタムフックです。Modal、Dialog、Drawerなどのコンポーネントを制御するために使用できます。