KDivider

The dividing line that separates the content.

Install

pnpm

pnpm add @ikun-ui/divider

yarn

yarn add @ikun-ui/divider

npm

npm install @ikun-ui/divider

Basic usage

Divide the text of different paragraphs.

The worst way to miss someone is to be sitting right beside them knowing you can’t have them.

Life is like a box of chocolates, you never know what you are going to get.

Custom content

You can customize the content on the divider line.

When you feel like hope is gone, look inside you and search your soul. you will find a hero lies in you. dreams are hard to follow, but don't let anyone steal your dream.

Left Text

Just because someone doesn't love you the way you want them to, doesn't mean they don't love you with all they have.

Center Text

Life has taught us that love does not consist in gazing at each other but in looking outward together in the same direction.

Right Text

Love is an act of endless forgiveness, a tender look which becomes Being deeply loved by someone gives you strength, loving someone deeply gives you courage.

Line Style

You can set the style of divider.

I never consider ease and joyfulness the purpose of life itself.

I am not afraid of tomorrow for I have seen yesterday and love today.

Courage is the ladder on which all the other virtues mount.

Better to light one candle than to curse the darkness.

You don't have to see the whole staircase, just take the first step.

Vertical divider

apple

banana

orange

Divider Props

Name	Type	Default	Description
direction	horizontal / vertical	horizontal	Set divider's direction.
borderColor	string	'b-ikun-bd-base'	divider's line color.
borderStyle	dotted | dashed | solid | double | groove | ridge | inset | outset	solid	divider's line style.
contentPosition	left / center / right	center	the position of the customized content on the divider line.
cls	string	-	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

Divider Slots

Name	Description
default	customized content on the divider line.