CngxDivider

cngx-divider

DirectivePrimaryv0.1.0WCAG AA

projects/common/display/divider/divider.directive.ts

Import#

import { CngxDivider } from '@cngx/common/display'

Description#

Thin presentational separator with proper ARIA semantics.

Renders role="separator" + aria-orientation - required for assistive technologies to announce the divider correctly. Visual style is driven by CSS custom properties (--cngx-divider-color, --cngx-divider-thickness, --cngx-divider-inset). Consumers apply their own styles through .cngx-divider or override the variables.

https://cngxjs.github.io/cngx/examples/#/common/display/divider/horizontal-vs-vertical https://cngxjs.github.io/cngx/examples/#/common/display/divider/inset

Metadata#

Selector: cngx-divider, [cngxDivider]
Export as: cngxDivider

Host#

Class: cngx-divider
Static attributes: roleseparator
[attr.aria-orientation]orientation()
Bound classes: cngx-divider--vertical ← orientation() === "vertical" cngx-divider--inset ← inset

Index#

Inputs

inset orientation

HostBindings

attr.aria-orientation class.cngx-divider--vertical class.cngx-divider--inset

Inputs#

inset#boolean

input()

Whether start/end padding is applied inside the separator.

default false

orientation#"horizontal" | "vertical"

input()

Layout axis. Horizontal dividers sit between rows; vertical between columns.

default 'horizontal'

HostBindings#

Binding	Expression
`[attr.aria-orientation]`	`orientation()`
`[class.cngx-divider--vertical]`	`orientation() === "vertical"`
`[class.cngx-divider--inset]`	`inset()`