Divider

<pc-divider>

0.5.1

experimental

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Dividers are used to visually separate or group elements.

<pc-divider></pc-divider>

Code

Edit

Demos#

Stroke width#

Use the --stroke-width custom property to change the stroke width of the divider.

<pc-divider style="--stroke-width: var(--pc-border-width-xl)"></pc-divider>

Code

Edit

Colour#

Use the --color custom property to change the colour of the divider.

<pc-divider style="--color: var(--pc-color-primary-border-loud)"></pc-divider>

Code

Edit

Spacing#

Use the --spacing custom property to change the amount of space between the divider and its neighbouring elements.

<div style="text-align: center">
    Above
    <pc-divider style="--spacing: 2rem"></pc-divider>
    Below
</div>

Code

Edit

Orientation#

Set the orientation attribute to vertical to orientate the divider vertically. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.

<div style="display: flex; align-items: center">
    First
    <pc-divider orientation="vertical"></pc-divider>
    Second
    <pc-divider orientation="vertical"></pc-divider>
    Last
</div>

Code

Edit

Properties#

Name	Description	Reflects	Default
`orientation`	Sets the orientation of the divider. Type: `"horizontal" \| "vertical"`		`"horizontal"`
`updateComplete`	A read‐only promise that resolves when the component has finished updating.		‐

Learn more about attributes and properties.

Custom properties#

Name	Description	Default
`--color`	The colour of the divider.	`var(--pc-color-surface-border)`
`--stroke-width`	The stroke width of the divider line.	`var(--pc-panel-border-width)`
`--spacing`	The spacing of the divider.	`var(--pc-content-spacing)`

Learn more about customising custom properties.

Importing#

If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.

CDN (script tag)

CDN (import)

npm (import)

To manually import this component from the CDN, copy this code snippet and paste it in your HTML.

  <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/divider/divider.js"></script> 

To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.

  import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/divider/divider.js"; 

To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.

import "placer-toolkit/dist/components/divider/divider.js";