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

Eigenschaften

Name	Beschreibung	Reflektiert	Standard
`orientation`	Sets the orientation of the divider. Typ: `"horizontal" \| "vertical"`		`"horizontal"`
`updateComplete`	Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde.		‐

Erfahre mehr über Attribute und Eigenschaften.

Benutzerdefinierte Eigenschaften

Name	Beschreibung	Standard
`--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)`

Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.

Importieren

Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.

CDN (Skript‐Tag)

CDN (Import)

npm (Import)

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.

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

Um diese Komponente manuell vom CDN zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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

Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.

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