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, kopiere dieses Code‐Snippet und füge es in dein HTML ein.

  <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, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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

Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.

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