Divider
Dividers are used to visually separate or group elements.
<pc-divider></pc-divider>Demos
Stroke width
Use the --stroke-width custom property to change the stroke width of the divider.
Colour
Use the --color custom property to change the colour of the divider.
Spacing
Use the --spacing custom property to change the amount of space between the divider and its neighbouring elements.
Vertical
Add the vertical attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
Menu dividers
Use dividers in menus to visually group menu items.
Properties
| Name | Description | Reflects | Default |
|---|---|---|---|
vertical | Vertically orientates the divider. boolean | false | |
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. | - |
--stroke-width | The stroke width of the divider line. | - |
--spacing | The spacing of the divider. | - |
Learn more about customising custom properties.
Importing
If you’re using the autoloader or the standard loader, you can ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.
To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/divider/divider.js"></script>To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript:
import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/divider/divider.js";To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript:
import "placer-toolkit/dist/components/divider/divider.js";