🌏 Translated with the assistance of DeepSeek and ChatGPT

Divider

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."

Hide source code

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.

Hide source code

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.

Hide source code

The separator line supports enabling light mode via soft, and customizing the color via color.

Content 1

Content 2

Content 3

Hide source code

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
soft	`boolean`	True	`false`		0.2.0
color	`string`	True	`false`		0.2.0