Separator 分隔符
在内容区块之间进行视觉分隔。
引入
import { Separator } from '@heroui/react';用法
HeroUI v3 组件
美观、快速、现代的 React UI 库。
博客
文档
源码
import {Separator} from "@heroui/react";
export function Basic() {
return (
<div className="max-w-md">垂直方向
博客
文档
源码
import {Separator} from "@heroui/react";
export function Vertical() {
return (
<div className="text-small flex h-5 items-center space-x-4">带内容
设置通知
接收账户活动更新
设置浏览器扩展
将浏览器连接到你的账户
铸造收藏品
创建你的第一件收藏品
import {Separator} from "@heroui/react";
const items = [
{
iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png",变体
默认变体
次要变体
第三变体
import {Separator} from "@heroui/react";
export function Variants() {
return (
<div className="flex max-w-md flex-col items-center gap-3">与 Surface 组合
Separator 会适配不同的 surface 背景，以获得更好的可见性。
默认表面
表面内容
次要表面
表面内容
第三表面
表面内容
透明表面
表面内容
import {Separator, Surface} from "@heroui/react";
export function WithSurface() {
return (
<div className="flex flex-col gap-8">自定义渲染函数
HeroUI v3 组件
美观、快速、现代的 React UI 库。
博客
文档
源码
"use client";
import {Separator} from "@heroui/react";
export function CustomRenderFunction() {样式
传入 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
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Separator 的方向 |
variant | 'default' | 'secondary' | 'tertiary' | 'default' | Separator 的视觉变体 |
className | string | - | 额外的 CSS 类名 |
render | DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined> | - | 通过自定义渲染函数覆盖默认的 DOM 元素。 |
