@kit-ng-ui/divider

Separator line for Kit UI. Mirrors ant-design's <Divider> API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/divider @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/divider/styles' as divider;

Use

import { KitDividerComponent } from '@kit-ng-ui/divider';

@Component({
  standalone: true,
  imports: [KitDividerComponent],
  template: `
    <p>Above</p>
    <kit-divider />
    <p>Below</p>

    <kit-divider orientation="left">Section title</kit-divider>
    <kit-divider variant="dashed">Dashed</kit-divider>
    <kit-divider plain orientationMargin="24">Plain offset</kit-divider>

    <span>Foo</span>
    <kit-divider type="vertical" />
    <span>Bar</span>
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ------------------- | --------------------------------------------- | -------------- | ------------------------------------------------------------------------------------ | | type | 'horizontal' \| 'vertical' | 'horizontal' | Axis of the divider. Vertical is inline and meant to sit between text/inline nodes. | | orientation | 'left' \| 'right' \| 'center' | 'center' | Position of the projected label along a horizontal divider. | | orientationMargin | string \| number \| null | null | Extra offset applied to the label on the chosen side (number ⇒ px). | | variant | 'solid' \| 'dashed' \| 'dotted' | 'solid' | Line style. | | plain | boolean | false | De-emphasizes the label (regular weight, secondary colour, base font size). | | dashed | boolean | false | Back-compat alias for variant="dashed". Wins when both are set. // TODO(parity). |

Behavior notes

• Project content inside the tag to render a label; leave the tag empty for a plain rule. The empty case is handled with CSS :empty, so no input toggling is needed.
• Vertical dividers are designed for inline contexts only — wrap inline nodes such as text, links, or icons. For block separation use a horizontal divider.
• Variant + label combine freely: <kit-divider variant="dashed" orientation="left">Tasks</kit-divider>.