# Separator 分隔符 · HeroUI

> 在内容区块之间进行视觉分隔。

- 页面: https://jiguang132.com/zh/systems/heroui/docs/components/separator
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 引入

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

### 用法


> 示例 `separator-basic`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


### 垂直方向


> 示例 `separator-vertical`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


### 带内容


> 示例 `separator-with-content`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


### 变体


> 示例 `separator-variants`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


### 与 Surface 组合

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


> 示例 `separator-with-surface`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


### 自定义渲染函数


> 示例 `separator-custom-render-function`: 交互预览见 https://jiguang132.com/zh/systems/heroui/docs/components/separator


## 样式

### 传入 Tailwind CSS 类

```tsx
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` 指令。
  
[了解更多](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes)。

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

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

HeroUI 遵循 [BEM](https://getbem.com/) 方法论，确保组件变体与状态可复用且易于定制。

### CSS 类

Separator 使用以下 CSS 类（[查看源码样式](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/separator.css)）：

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

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

## API 参考

### Separator Props

| Prop | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Separator 的方向 |
| `variant` | `'default' \| 'secondary' \| 'tertiary'` | `'default'` | Separator 的视觉变体 |
| `className` | `string` | - | 额外的 CSS 类名 |
| `render` | `DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>` | - | 通过自定义渲染函数覆盖默认的 DOM 元素。 |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt