Separator 分隔符

引入

import { Separator } from '@heroui/react';

用法

垂直方向

带内容

变体

与 Surface 组合

Separator 会适配不同的 surface 背景，以获得更好的可见性。

自定义渲染函数

样式

传入 Tailwind CSS 类

import {Separator} from '@heroui/react';

function CustomSeparator() {
  return (
    <Separator className="my-8 bg-linear-to-r from-transparent via-default-500 to-transparent" />
  );
}

自定义组件类

若要自定义 Separator 的组件类名，可使用 @layer components 指令。
了解更多。

@layer components {
  .separator {
    @apply bg-accent h-[2px];
  }

  .separator--vertical {
    @apply bg-accent w-[2px];
  }
}

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于定制。

CSS 类

Separator 使用以下 CSS 类（查看源码样式）：

基础类与方向类

• .separator - 基础 Separator 样式，默认水平方向
• .separator--horizontal - 水平方向（全宽，高度 1px）
• .separator--vertical - 垂直方向（全高，宽度 1px）

变体类

• .separator--default - 默认变体，标准对比度
• .separator--secondary - 次要变体，中等对比度
• .separator--tertiary - 第三级变体，较弱对比度

API 参考

Separator Props