Installation
import { WrDivider } from 'ngwr/divider';
@Component({ imports: [WrDivider] })
export class MyComponent {}Basic usage
<wr-divider />Line styles
<wr-divider type="solid" />
<wr-divider type="dashed" />
<wr-divider type="dotted" />Colors
<wr-divider color="primary" />
<wr-divider color="success" />Width
<wr-divider [width]="3" color="primary" />With label
Project content between the tags to render a label inline with the line. Use align to push it to the start or end.
<wr-divider>OR</wr-divider>
<wr-divider align="start">Section</wr-divider>
<wr-divider align="end" type="dashed">Footnotes</wr-divider>Long label
Long labels wrap naturally without breaking the line halves. Useful for inline section descriptions.
<wr-divider>Continued from the previous chapter — see appendix B for derivations</wr-divider>API
| Name | Description | Type | Default |
|---|---|---|---|
color | Color of the divider line. Omit for the neutral default. | WrColor | null | null |
type | Line style. | WrDividerType | 'solid' |
width | Line width in pixels. | number | 1 |
align | Label position. Only meaningful when the divider has projected content — otherwise the line is symmetric and alignment has no visible effect. | WrDividerAlign | 'center' |
CSS variables
Custom properties ngwr/divider publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-divider-aside | 1rem | .wr-divider |
--wr-divider-color | var(--wr-color-outline) | .wr-divider +1 variant override |
--wr-divider-gap | 0.75rem | .wr-divider |
--wr-divider-style | solid | .wr-divider +2 variant overrides |
--wr-divider-width | 1px | .wr-divider |