Skip to content
Lenso UI

Separator 分隔符

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

用法

import { Separator } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";
import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";
const styles = stylex.create({  root: { maxWidth: 448 },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 500 },  description: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  intro: { display: "flex", flexDirection: "column", gap: 4 },  separator: { marginBlock: 16 },  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function Basic() {  return (    <div {...stylex.props(styles.root)}>      <div {...stylex.props(styles.intro)}>        <h4 {...stylex.props(styles.heading)}>HeroUI v3 Components</h4>        <p {...stylex.props(styles.description)}>Beautiful, fast and modern React UI library.</p>      </div>      <Separator xstyle={styles.separator} />      <div {...stylex.props(styles.links)}>        <span>Blog</span>        <Separator orientation="vertical" />        <span>Docs</span>        <Separator orientation="vertical" />        <span>Source</span>      </div>    </div>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

示例

变体

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: {    display: "flex",    maxWidth: 448,    flexDirection: "column",    alignItems: "center",    gap: 12,  },});export function Variants() {  return (    <div {...stylex.props(styles.column)}>      <div>Default Variant</div>      <Separator variant="default" />      <div>Secondary Variant</div>      <Separator variant="secondary" />      <div>Tertiary Variant</div>      <Separator variant="tertiary" />    </div>  );}export default Variants;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

与 Surface 组合

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

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator, Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", flexDirection: "column", gap: 32 },  surface: {    display: "flex",    minWidth: 320,    flexDirection: "column",    gap: 12,    borderRadius: "var(--radius-3xl)",    padding: 24,  },  border: { border: "1px solid var(--border)" },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 600, color: "var(--foreground)" },  text: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },});export function WithSurface() {  return (    <div {...stylex.props(styles.column)}>      {(["default", "secondary", "tertiary", "transparent"] as const).map((variant) => (        <Surface          key={variant}          xstyle={[styles.surface, variant === "transparent" && styles.border]}          variant={variant}        >          <h3 {...stylex.props(styles.heading)}>            {variant[0]?.toUpperCase()}            {variant.slice(1)} Surface          </h3>          <Separator variant={variant === "transparent" ? "default" : variant} />          <p {...stylex.props(styles.text)}>Surface Content</p>        </Surface>      ))}    </div>  );}export default WithSurface;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

垂直方向

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function Vertical() {  return (    <div {...stylex.props(styles.links)}>      <div>Blog</div>      <Separator orientation="vertical" />      <div>Docs</div>      <Separator orientation="vertical" />      <div>Source</div>    </div>  );}export default Vertical;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

带内容

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const items = [  {    iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/bell-small.png",    subtitle: "Receive account activity updates",    title: "Set Up Notifications",  },  {    iconUrl: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/compass-small.png",    subtitle: "Connect your browser to your account",    title: "Set up Browser Extension",  },  {    iconUrl:      "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/3dicons/mint-collective-small.png",    subtitle: "Create your first collectible",    title: "Mint Collectible",  },];const styles = stylex.create({  column: { display: "flex", maxWidth: 448, flexDirection: "column", gap: 16 },  row: { display: "flex", alignItems: "center", gap: 12 },  image: { width: 48, height: 48 },  text: { flex: 1 },  title: { fontSize: 14, lineHeight: "20px", fontWeight: 500 },  subtitle: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  separator: { marginBlock: 16 },});export function WithContent() {  return (    <div {...stylex.props(styles.column)}>      {items.map((item, index) => (        <div key={item.title}>          <div {...stylex.props(styles.row)}>            <img alt={item.title} {...stylex.props(styles.image)} src={item.iconUrl} />            <div {...stylex.props(styles.text)}>              <h4 {...stylex.props(styles.title)}>{item.title}</h4>              <p {...stylex.props(styles.subtitle)}>{item.subtitle}</p>            </div>          </div>          {index < items.length - 1 && <Separator xstyle={styles.separator} />}        </div>      ))}    </div>  );}export default WithContent;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

渲染函数

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); Base UI owns render composition.import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  root: { maxWidth: 448 },  intro: { display: "flex", flexDirection: "column", gap: 4 },  heading: { fontSize: 16, lineHeight: "24px", fontWeight: 500 },  description: { fontSize: 14, lineHeight: "20px", color: "var(--muted)" },  separator: { marginBlock: 16 },  links: { display: "flex", alignItems: "center", gap: 16, height: 20, fontSize: 14 },});export function RenderFunction() {  return (    <div {...stylex.props(styles.root)}>      <div {...stylex.props(styles.intro)}>        <h4 {...stylex.props(styles.heading)}>HeroUI v3 Components</h4>        <p {...stylex.props(styles.description)}>Beautiful, fast and modern React UI library.</p>      </div>      <Separator        xstyle={styles.separator}        render={(props) => <div {...props} data-custom="foo" />}      />      <div {...stylex.props(styles.links)}>        <div>Blog</div>        <Separator          orientation="vertical"          render={(props) => <div {...props} data-custom="foo" />}        />        <div>Docs</div>        <Separator          orientation="vertical"          render={(props) => <div {...props} data-custom="foo" />}        />        <div>Source</div>      </div>    </div>  );}export default RenderFunction;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Separator } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", maxWidth: 320, flexDirection: "column", gap: 16 },  title: { fontSize: 14, lineHeight: "20px", fontWeight: 500, color: "var(--foreground)" },  secondary: { backgroundColor: "var(--separator-secondary)" },  links: {    display: "flex",    alignItems: "center",    gap: 12,    fontSize: 14,    lineHeight: "20px",    color: "var(--muted)",  },  divider: { height: 16, backgroundColor: "var(--separator)" },});export function CustomStyles() {  return (    <div {...stylex.props(styles.column)}>      <p {...stylex.props(styles.title)}>Account settings</p>      <Separator xstyle={styles.secondary} />      <div {...stylex.props(styles.links)}>        <span>Profile</span>        <Separator xstyle={styles.divider} orientation="vertical" />        <span>Billing</span>        <Separator xstyle={styles.divider} orientation="vertical" />        <span>Security</span>      </div>    </div>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

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

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

样式参考

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

CSS 类

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

基础类与方向类 [!toc]

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

变体类 [!toc]

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

API 参考

Separator

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

相关组件

Card 卡片

灵活容器组件，用于分组相关内容与操作

Chip 标签

用于显示标签、状态与分类的小型信息徽章

Avatar 头像

显示用户头像，支持自定义 fallback 内容