Divider 分割线

用于分隔内容的分割线组件，支持可选文本，水平和垂直方向。

?

名称	分类	说明	类型	默认值
content-position	? 风格	内容位置（仅水平方向）	'left' | 'center' | 'right'	'center'
type	? 风格	预设主题颜色类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
border-style	? 风格	边框样式	'solid' | 'dashed' | 'dotted'	'solid'
color	? 颜色	自定义十六进制颜色	string	—
direction	? 行为	分割线方向	'horizontal' | 'vertical'	'horizontal'
content	? 内容	分割线文本内容	string	—
default	? 插槽	自定义分割线内容（仅水平方向）		—

基础用法

使用 px-divider 来分隔内容。可以通过 content 属性或默认插槽添加文本。

<template>
  <div class="demo-divider">
    <p>Pixel art is a form of digital art where images are edited at the pixel level.</p>
    <px-divider />
    <p>It originated from the limitations of early computer graphics and video game consoles.</p>
    <px-divider content="Text Content" />
    <p>Today, pixel art is a popular aesthetic choice in indie games and retro-themed designs.</p>
  </div>
</template>

<style scoped>
.demo-divider p {
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-regular);
  margin: 0;
}
</style>

垂直分割线

使用 direction="vertical" 来实现行内垂直分隔。垂直分割线不会渲染内容。

<template>
  <div class="demo-divider">
    <span>Home</span>
    <px-divider direction="vertical" />
    <span>About</span>
    <px-divider direction="vertical" />
    <span>Contact</span>
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  align-items: center;
  font-family: var(--px-font-family);
  font-size: 14px;
  color: var(--px-text-color-regular);
}
</style>

内容位置

使用 content-position 来控制文本在分割线上的位置。

<template>
  <div class="demo-divider">
    <px-divider content="Left" content-position="left" />
    <px-divider content="Center" content-position="center" />
    <px-divider content="Right" content-position="right" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

类型

使用 type 属性来应用预设主题颜色。

<template>
  <div class="demo-divider">
    <px-divider content="Primary" type="primary" />
    <px-divider content="Success" type="success" />
    <px-divider content="Warning" type="warning" />
    <px-divider content="Danger" type="danger" />
    <px-divider content="Info" type="info" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

自定义颜色

使用 color 属性来设置分割线和文本的自定义十六进制颜色。

<template>
  <div class="demo-divider">
    <px-divider content="Coral" color="#ff6b6b" />
    <px-divider content="Teal" color="#20c997" />
    <px-divider content="Purple" color="#845ef7" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

边框样式

使用 border-style 属性来改变线条样式。支持 solid、dashed 和 dotted 像素风格图案。

<template>
  <div class="demo-divider">
    <px-divider content="Solid (default)" />
    <px-divider content="Dashed" border-style="dashed" />
    <px-divider content="Dotted" border-style="dotted" />
  </div>
</template>

<style scoped>
.demo-divider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>