アクションとオーバーレイ@neumorphism-ui/sheet

Sheet

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

@neumorphism-ui/sheet

Registry JSON

プレビュー

インストール

npx shadcn@latest add @neumorphism-ui/sheet

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription, SheetClose } from "@/components/ui/sheet";
import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from "@/components/ui/field";

Example

export default function Example() {
  const [name, setName] = React.useState("Alex");
  const nameField = <Field name="displayName"><FieldLabel>{"表示名"}</FieldLabel><FieldControl required value={name} onValueChange={setName} /><FieldDescription>{"プロフィールに表示する名前を入力してください。"}</FieldDescription><FieldError match="valueMissing">{"名前を入力してください。"}</FieldError></Field>;
  return (<Sheet><SheetTrigger render={<Button />}>{"プロフィール設定"}</SheetTrigger><SheetContent closeLabel={"閉じる"}><SheetTitle>{"プロフィール設定"}</SheetTitle><SheetDescription>{"プロフィールに表示する名前を入力してください。"}</SheetDescription>{nameField}<SheetClose render={<Button variant="primary" />}>{"閉じる"}</SheetClose></SheetContent></Sheet>);
}

API リファレンス

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

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ