행동과 오버레이@neumorphism-ui/sheet

Sheet

화면 가장자리에서 여는 스크롤 가능한 작업 패널. SheetTitle과 설명을 포함하세요. 작은 화면에서도 닫기와 마지막 필드에 도달할 수 있어야 합니다.

@neumorphism-ui/sheet

Registry JSON

미리보기

설치

npx shadcn@latest add @neumorphism-ui/sheet

CLI가 npm 의존성, base 토큰, 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 레퍼런스

접근성