Neumorphism UI

Sheet

画面端のパネルで設定、詳細の確認、編集を行う場合に使います。

プレビュー

プロフィール名の編集

制御された必須の名前フィールドと、閉じる操作を備えた設定パネルです。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/sheet

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

プロフィール名の編集

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/sheet @neumorphism-ui/field
Registry JSON

使い方

SheetTrigger、SheetContent、タイトル、説明を組み合わせます。フィールドを配置し、閉じる操作は SheetClose、保存はアプリの状態処理に接続します。

"use client";

import { Button } from "@/components/ui/button";
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button />}>Workspace details</SheetTrigger>
      <SheetContent>
        <SheetTitle>Team workspace</SheetTitle>
        <SheetDescription>Review this workspace without leaving the page.</SheetDescription>
      </SheetContent>
    </Sheet>
  );
}

API リファレンス

画面の端から開くスクロール可能な操作パネル。 SheetTitle と説明を含め、小さな画面でも閉じるボタンと最後の入力に到達できるようにします。

コンポーネントプロパティ型デフォルト説明
SheetContentside"left" | "right" | "top" | "bottom"—画面境界を考慮した位置または間隔を設定します。
SheetContentcloseLabelstring—閉じるボタンのアクセス可能な名前です。
Sheetopen / onOpenChangeDialog.Root.Props—制御状態または初期状態を指定します。

アクセシビリティ

  • 01

    SheetTitle と説明を含め、小さな画面でも閉じるボタンと最後の入力に到達できるようにします。

  • 02

    render や className を変更する際もラベルと可視フォーカスを保ちます。