<kbq-divider> is a component that allows for koobiq styling of a line separator with various orientation options.

Simple divider

A <kbq-divider> element can be used on its own to create a horizontal or vertical line styled with a koobiq theme

<kbq-divider />

Vertical divider

Add the vertical attribute in order to set whether or not the divider is vertically-oriented.

Length

A divider takes its length from the layout around it, which is what one spanning a container wants. Give it a length in pixels where it has to be shorter than its surroundings — between the buttons of a toolbar, say. The value applies along the line: it is the height of a vertical divider and the width of a horizontal one.

<kbq-divider length="16" [vertical]="true" />

Spacing

Both orientations space themselves from the content around them by default. Add [paddings]="false" for a divider that sits flush against them.

<kbq-divider [paddings]="false" />

Decorative divider

A divider is a separator for assistive technology: it announces the boundary it draws. Add the decorative attribute where the boundary is already conveyed some other way — by a heading, by a group, or by the layout — so the same boundary is not announced twice.

<kbq-divider decorative />

Lists with dividers

Dividers can be added to lists as a means of separating content into distinct sections. A divider between the items of one section repeats a boundary the list already conveys, so mark it decorative; the divider that ends a section is the one worth announcing.

<kbq-list>
    <h3>Folders</h3>
    @for (folder of folders; track folder.name) {
        <kbq-list-item>
            <h4 kbq-line>{{ folder.name }}</h4>
            <p kbq-line>{{ folder.updated }}</p>
        </kbq-list-item>
        @if (!$last) {
            <kbq-divider decorative />
        }
    }
    <kbq-divider />
    <h3>Notes</h3>
    @for (note of notes; track note.name) {
        <kbq-list-item>
            <h4 kbq-line>{{ note.name }}</h4>
            <p kbq-line>{{ note.updated }}</p>
        </kbq-list-item>
    }
</kbq-list>