import { Component } from '@angular/core';
import { WrDivider } from 'ngwr/divider';
@Component({ imports: [WrDivider] })
export class MyComponent {}Divider
A horizontal line between blocks of content.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
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
Put text inside to label the line; align moves 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
A long label wraps, and the line stays on both sides.
<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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/divider's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-divider-aside | 1rem | .wr-divider |
--wr-divider-color | var(--wr-border-base) | .wr-divider +1 variant override |
--wr-divider-font-size | var(--wr-text-sm) | .wr-divider |
--wr-divider-gap | var(--wr-space-md) | .wr-divider |
--wr-divider-line-height | var(--wr-text-sm-leading) | .wr-divider |
--wr-divider-style | solid | .wr-divider +2 variant overrides |
--wr-divider-width | 1px | .wr-divider |