Neumorphism UI
操作与浮层@neumorphism-ui/sheet

Sheet

从视口边缘打开的可滚动操作面板。 包含 SheetTitle 和说明。小屏幕上也应能到达关闭按钮及最后一个字段。

@neumorphism-ui/sheet
Registry JSON

预览

安装

安装: sheetnpx 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

Sheet 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

Sheet 用法代码
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 参考

组件属性类型默认值说明
SheetContentside"left" | "right" | "top" | "bottom"—设置考虑视口边界的面板位置或间距。
SheetContentcloseLabelstring—关闭按钮的可访问名称。
Sheetopen / onOpenChangeDialog.Root.Props—设置受控状态或初始状态。

无障碍

  • 01

    包含 SheetTitle 和说明。小屏幕上也应能到达关闭按钮及最后一个字段。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。