Neumorphism UI

Separator

用于标示相关内容区域或控件组之间的边界。

预览

水平与垂直边界

用水平线分隔文档介绍与链接，再用垂直线分隔预览、安装和 API 链接。

组件文档查看示例、安装步骤和组件属性。
预览安装API

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/separator

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

将其放在内容组之间，并选择水平或垂直方向。只有需要辅助技术读出分隔语义时，才将 decorative 设为 false。

import { Separator } from "@/components/ui/separator";

export default function Example() {
  return (
    <div>
      <p>Profile settings</p>
      <Separator className="my-4" />
      <p>Notification settings</p>
    </div>
  );
}

API 参考

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

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

无障碍

  • 01

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

  • 02

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

  • 03

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