Separator 分隔符

用法

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

示例

变体

与 Surface 组合

Separator 组件会根据不同的表面背景自动适配，以获得更好的可见性。

垂直方向

带内容

渲染函数

自定义样式

Tailwind CSS

全局 CSS

若要自定义组件类，可使用 @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

相关组件