分隔线 Divider

用来分隔不同内容区域的组件，能让你的页面各部分的边界更加清晰。

基础使用

分隔线分开不同内容区域。

Thus spake the master programmer:

"Let the programmer be many and the managers few -- then all will be productive."

<template>
	Thus spake the master programmer:
	<px-divider></px-divider>
	"Let the programmer be many and the managers few -- then all will be productive."
</template>

分隔线方向

分隔线支持水平和垂直方向，通过 direction 属性设置。

A well-used door needs no oil on its hinges.

A swift-flowing steam does no grow stagnant.

Neither sound nor thoughts can travel through a vacuum.

Software rots if not used. These are great mysteries.

<template>
	<div style="margin-bottom: 8px">
		A well-used door needs no oil on its hinges.
		<px-divider></px-divider>
		A swift-flowing steam does no grow stagnant.
	</div>
	<div>
		Neither sound nor thoughts can travel through a vacuum.
		<px-divider direction="vertical"></px-divider>
		Software rots if not used. These are great mysteries.
	</div>
</template>

分隔线样式

分隔线支持多种基于 CSS border-style 实现的样式，通过 variant 属性设置。

When designing an accounting package, the programmer operates as a mediator between people having different ideas:

how it must operate,

how its reports must appear,

and how it must conform to the tax laws.

By contrast, an operating system is not limited my outside appearances.

When designing an operating system, the programmer seeks the simplest harmony between machine and ideas.

This is why an operating system is easier to design.

<template>
	When designing an accounting package, the programmer operates as a mediator between people
	having different ideas:
	<px-divider></px-divider>
	how it must operate,
	<px-divider variant="double"></px-divider>
	how its reports must appear,
	<px-divider variant="dashed"></px-divider>
	and how it must conform to the tax laws.
	<px-divider variant="dotted"></px-divider>
	By contrast, an operating system is not limited my outside appearances.
	<px-divider variant="ridge"></px-divider>
	When designing an operating system, the programmer seeks the simplest harmony between machine
	and ideas.
	<px-divider variant="groove"></px-divider>
	This is why an operating system is easier to design.
</template>

API

DividerProps

属性	类型	可选	默认值	描述	版本
direction	'horizontal' | 'vertical'	是	'horizontal'	分隔线方向。	0.0.0-beta
variant	'solid' | 'dashed' | 'dotted' | 'double' | 'ridge' | 'groove'	是	'solid'	基于 CSS border-style 实现的分隔线样式。	0.0.0-beta
margin	number | string	是		分割线间距，水平时为上下间距，垂直时为左右间距。	0.0.0-beta
size	number | string	是		分隔线宽度。	0.0.0-beta