分割线

查看源代码

分隔内容区域并分离模块。

导入

import { Separator } from "@resolid/react-ui";

用法

颜色

举例

外观

分割线有三种不同的外观可供使用。通过传递 variant 属性，可以选择使用 solid、dotted 或 dashed 中的任意一种。

import { Separator } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col gap-5 py-5"}>
      <Separator variant={"solid"} />
      <Separator variant={"dotted"} />
      <Separator variant={"dashed"} />
    </div>
  );
}

颜色

通过传递 color 属性来更改分隔线的颜色，分隔线支持 primary、secondary、success、warning、danger 和 neutral 这些颜色。

import { Separator } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col gap-5 py-5"}>
      <Separator color={"primary"} />
      <Separator color={"secondary"} />
      <Separator color={"success"} />
      <Separator color={"warning"} />
      <Separator color={"danger"} />
      <Separator color={"neutral"} />
    </div>
  );
}

大小

分隔线使用 ${size}px 来设置大小，大小应为数字。

import { Separator } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-col gap-5 py-5"}>
      <Separator size={2} />
      <Separator size={3} />
      <Separator size={5} />
    </div>
  );
}

布局方向

分隔线使用 orientation 属性来确定布局方向，horizontal 表示横向; vertical 表示垂直方向。

LabelLabelLabelLabelLabelLabelLabel
import { Separator } from "@resolid/react-ui";

export default function App() {
  return (
    <div className={"flex flex-row gap-5 px-5"}>
      <span>Label</span>
      <Separator orientation={"vertical"} />
      <span>Label</span>
      <Separator orientation={"vertical"} variant="dashed" />
      <span>Label</span>
      <Separator orientation={"vertical"} variant="dotted" />
      <span>Label</span>
      <Separator orientation={"vertical"} color={"primary"} />
      <span>Label</span>
      <Separator orientation={"vertical"} size={3} color={"success"} variant="dotted" />
      <span>Label</span>
      <Separator orientation={"vertical"} size={2} color={"danger"} variant="dashed" />
      <span>Label</span>
    </div>
  );
}

文本标签

分割线使用 children 属性来表示标签，position 属性确定标签所在位置，只有 orientation 为 horizontal 的时候有效

import { Separator } from "@resolid/react-ui";
import { SpriteIcon } from "~/components/sprite-icon";

export default function App() {
  return (
    <div className={"flex flex-col gap-5 py-5"}>
      <Separator>Label in the center</Separator>
      <Separator position={"left"}>Label on the left</Separator>
      <Separator position={"right"}>Label on the right</Separator>
      <Separator>
        <SpriteIcon size={"1em"} className={"mr-1"} name={"search"} /> Search results
      </Separator>
      <Separator>
        <a href={"#文本标签"} className={"text-link hover:text-link-hovered hover:underline"}>
          Link label
        </a>
      </Separator>
    </div>
  );
}

属性

属性variant简介

外观

类型"solid" | "dashed" | "dotted"默认值"solid"必须false
属性color简介

颜色

类型"primary" | "secondary" | "success" | "warning" | "danger" | "neutral"默认值"neutral"必须false
属性orientation简介

布局方向

类型"horizontal" | "vertical"默认值"horizontal"必须false
属性size简介

大小

类型number默认值1必须false
属性position简介

文字位置

类型"left" | "right" | "center"默认值"center"必须false

建议更改此页面