m3-baseui

FabMenu

FAB から展開する Speed Dial メニュー。子アクションを縦に配置します。

参考: Material Design 3 公式ガイドライン m3.material.io/components/fab-menu/overview

Import

import { FabMenu, Fab, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<FabMenu.Root>
  <FabMenu.Trigger color="primary" aria-label="作成">
    <Icon name="add" />
  </FabMenu.Trigger>
  <FabMenu.Portal>
    <FabMenu.Positioner sideOffset={12} align="end" side="top">
      <FabMenu.Popup>
        <FabMenu.Item icon={<Icon name="edit" />}>編集</FabMenu.Item>
        <FabMenu.Item icon={<Icon name="share" />}>共有</FabMenu.Item>
      </FabMenu.Popup>
    </FabMenu.Positioner>
  </FabMenu.Portal>
</FabMenu.Root>

Props

Prop型既定値説明
FabMenu.Item iconReactNode—先頭アイコン