m3-baseui

BottomSheet

画面下部からスライドするシート。ドラッグハンドルとスクリムを備えます。

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

Import

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

使用例

<BottomSheet.Root>
  <BottomSheet.Trigger render={<Button variant="tonal">開く</Button>} />
  <BottomSheet.Portal>
    <BottomSheet.Backdrop />
    <BottomSheet.Viewport>
      <BottomSheet.Popup>
        <BottomSheet.Handle />
        <BottomSheet.Title>タイトル</BottomSheet.Title>
        <BottomSheet.Description>本文</BottomSheet.Description>
      </BottomSheet.Popup>
    </BottomSheet.Viewport>
  </BottomSheet.Portal>
</BottomSheet.Root>

Props

Prop型既定値説明
open / onOpenChangeboolean—BottomSheet.Root の制御モード