Skip to content
Lenso UI

Divider

Divider（已重命名为 Separator）从 HeroUI v2 到 v3 的迁移指南。

完整的 API 参考、样式指南与高级示例请参阅 v3 Separator 文档。本指南只关注从 HeroUI v2 的迁移。

组件重命名

v2： Divider
v3： Separator

主要变化

1. 组件名称

v2： Divider
v3： Separator

2. 变体 prop

v3： Separator 新增 variant prop，可选 default、secondary、tertiary，对应不同的强调层级（v2 的 Divider 没有变体）。

3. Prop 对比

属性v2v3说明
orientation✅✅相同："horizontal" | "vertical"
className✅✅相同
variant❌✅新增："default" | "secondary" | "tertiary"

结构变化

在 v2 中，组件名为 Divider：

import { Divider } from "@lenso/ui";
export default function App() {  return (    <div>      <p>Content above</p>      <Divider />      <p>Content below</p>    </div>  );}

在 v3 中，组件已重命名为 Separator：

import { Separator } from "@lenso/ui";
export default function App() {  return (    <div>      <p>Content above</p>      <Separator />      <p>Content below</p>    </div>  );}

迁移示例

使用变体

{/* v2 没有 variant prop */}<Divider />

总结

  1. 组件已重命名：Divider → Separator
  2. 导入变化：将导入从 Divider 更新为 Separator
  3. v3 新增功能：variant prop（default、secondary、tertiary），用于区分强调层级

迁移步骤

  1. 更新导入：将 import { Divider } 改为 import { Separator }
  2. 替换组件：把所有 <Divider /> 替换为 <Separator />
  3. 保留相同的 prop：orientation 与 className 行为不变
  4. 可选：使用 variant="secondary" 或 variant="tertiary" 表达不同的强调层级