Divider

🌏 Translated with the assistance of DeepSeek and ChatGPT

A component used to separate different content areas, making the boundaries of each part of your page clearer.

Basic Usage

The divider separates different content areas.

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>

Divider Direction

The divider supports both horizontal and vertical directions, which can be set via the direction property.

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>

Divider Style

The divider supports various styles based on CSS border-style, which can be set via the variant property.

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

Attribute	Type	Optional	Default	Description	Version
direction	'horizontal' | 'vertical'	True	'horizontal'	The direction of the divider.	0.0.0-beta
variant	'solid' | 'dashed' | 'dotted' | 'double' | 'ridge' | 'groove'	True	'solid'	The style of the divider based on CSS border-style.	0.0.0-beta
margin	number | string	True		The spacing of the divider, which is the top and bottom spacing when horizontal, and the left and right spacing when vertical.	0.0.0-beta
size	number | string	True		The width of the divider.	0.0.0-beta