Divider
<wa-divider>
Dividers are used to visually separate or group elements.
<wa-divider></wa-divider>
Examples
Jump to heading
Width
Jump to heading
Use the --width custom property to change the width of the divider.
<wa-divider style="--width: 4px;"></wa-divider>
Color
Jump to heading
Use the --color custom property to change the color of the divider.
<wa-divider style="--color: tomato;"></wa-divider>
Spacing
Jump to heading
Use the --spacing custom property to change the amount of space between the divider and it's neighboring elements.
<div style="text-align: center;"> Above <wa-divider style="--spacing: 2rem;"></wa-divider> Below </div>
Orientation
Jump to heading
The default orientation for dividers is horizontal. Set orientation attribute to vertical to draw a vertical divider. The divider will span the full height of its Flexbox or CSS Grid container.
<div style="display: flex; align-items: center;"> First <wa-divider orientation="vertical"></wa-divider> Middle <wa-divider orientation="vertical"></wa-divider> Last </div>
If your container isn't Flexbox or CSS Grid, you may need to set an explicit height for the divider.
Dropdown Dividers
Jump to heading
Use dividers in dropdowns to visually group dropdown items.
<wa-dropdown style="max-width: 200px;"> <wa-button slot="trigger" with-caret>Menu</wa-button> <wa-dropdown-item value="1">Option 1</wa-dropdown-item> <wa-dropdown-item value="2">Option 2</wa-dropdown-item> <wa-dropdown-item value="3">Option 3</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item value="4">Option 4</wa-dropdown-item> <wa-dropdown-item value="5">Option 5</wa-dropdown-item> <wa-dropdown-item value="6">Option 6</wa-dropdown-item> </wa-dropdown>
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/divider/divider.js';
To manually import this component from React, use the following code.
import WaDivider from '@awesome.me/webawesome/dist/react/divider';
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
customStates |
Methods for setting and checking custom states.
Type
objectDefault
{ /** Adds or removes the specified custom state. / set: (customState: string, active: boolean) => { if (!Boolean(this.internals?.states)) return; try { if (active) { this.internals.states.add(customState); } else { this.internals.states.delete(customState); } } catch (e) { if (String(e).includes("must start with '--'")) { / eslint-disable-next-line / console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill'); } else { throw e; } } }, /* Determines whether or not the element currently has the specified state. */ has: (customState: string) => { if (!Boolean(this.internals?.states)) return false; try { return this.internals.states.has(customState); } catch { return false; } }, } |
||
orientationorientation |
Sets the divider's orientation.
Type
'horizontal' | 'vertical'Default
'horizontal' |
|
Methods
Jump to heading
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
relayNativeEvent() |
Given a native event, this function cancels it and dispatches it again from the host element using the desired event options. |
event: Event,
eventOptions: EventInit
|
CSS custom properties
Jump to heading
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--color |
The color of the divider.
|
--spacing |
The spacing of the divider.
|
--width |
The width of the divider.
|