Neumorphism UI
数据与反馈@neumorphism-ui/separator

Separator

支持横向与纵向，默认作为装饰元素。需要表达有语义的区块边界时，可设置 decorative=false 以启用 separator role 和 aria-orientation。

@neumorphism-ui/separator
Registry JSON

预览

Neumorphism UI复制源码，掌控表面。
预览安装API

安装

安装: separatornpx shadcn@latest add @neumorphism-ui/separator

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Separator import 代码
import { Separator } from "@/components/ui/separator"

Example

Separator 用法代码
<div>
  <section>个人资料设置</section>
  <Separator className="my-6" />
  <section>通知设置</section>
</div>

API 参考

组件属性类型默认值说明
Separatororientation"horizontal" | "vertical""horizontal"设置分隔线方向和尺寸样式。
Separatordecorativebooleantruetrue 时作为装饰元素隐藏，false 时使用 role=separator。
SeparatorclassNamestring—扩展间距、长度和最小高度。

无障碍

  • 01

    仅用于视觉分隔时，保持默认的 decorative=true。

  • 02

    如果在文档结构中代表有意义的边界，应设置 decorative=false 以暴露 role=separator。

  • 03

    纵向 separator 需要父元素提供高度，或通过 className 设置明确高度。