Divider

组件重命名

v2： Divider
v3： Separator

主要变化

1. 组件名称

v2： Divider
v3： Separator

2. 变体 prop

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

3. Prop 对比

结构变化

在 v2 中，组件名为 Divider：

import { Divider } from "@heroui/react";

export default function App() {
  return (
    <div>
      <p>Content above</p>
      <Divider />
      <p>Content below</p>
    </div>
  );
}

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

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

export default function App() {
  return (
    <div>
      <p>Content above</p>
      <Separator />
      <p>Content below</p>
    </div>
  );
}

迁移示例

使用变体

<Tabs items={["v2", "v3"]}> <Tab value="v2"> tsx <Divider /> </Tab> <Tab value="v3"> tsx <Separator /> <Separator variant="secondary" /> <Separator variant="tertiary" /> </Tab> </Tabs>

总结

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" 表达不同的强调层级