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 时保留标签关联和可见焦点。