SideSheet

画面端からスライドするサイドシート。modal / standard バリアント。

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

Import

import { SideSheet, Button, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<SideSheet.Root>
  <SideSheet.Trigger render={<Button variant="tonal">開く</Button>} />
  <SideSheet.Portal>
    <SideSheet.Backdrop />
    <SideSheet.Viewport>
      <SideSheet.Popup>
        <SideSheet.Header>
          <SideSheet.Title>タイトル</SideSheet.Title>
          <SideSheet.Close aria-label="閉じる" />
        </SideSheet.Header>
        <SideSheet.Description>本文</SideSheet.Description>
      </SideSheet.Popup>
    </SideSheet.Viewport>
  </SideSheet.Portal>
</SideSheet.Root>

Props

Prop	型	既定値	説明
`SideSheet.Root side`	`'left' \| 'right'`	`'right'`	表示する端
`open / onOpenChange`	`boolean`	—	SideSheet.Root の制御モード