125k

Sheet

PreviousNext

Dialog コンポーネントを拡張し、画面のメインコンテンツを補完するコンテンツを表示します。

BaseRadixReact Aria
import { Button } from "@/components/ui/base/button"
import { Input } from "@/components/ui/base/input"
import { Label } from "@/components/ui/base/label"

インストール

pnpm dlx shadcn@latest add sheet

使い方

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

構成

以下の構成で Sheet を作成します。

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

サイド

SheetContent の side プロップを使用して、シートが表示される画面の端を指定します。値は top、right、bottom、left のいずれかです。

import { Button } from "@/components/ui/base/button"
import {
  Sheet,

閉じるボタンなし

SheetContent で showCloseButton={false} を使用すると、閉じるボタンを非表示にできます。

import { Button } from "@/components/ui/base/button"
import {
  Sheet,

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import {

API リファレンス

Base UI Dialog のドキュメントを参照してください。