Description list — API

Components

KbqDd

component

Description of the term before it.

 @Component({ selector: 'kbq-dd' })
class KbqDd {}

KbqDl

component

Description list: kbq-dt terms paired with kbq-dd descriptions in an adaptive, horizontal or vertical layout.

 @Component({ selector: 'kbq-dl' })
class KbqDl {
    readonly verticalBreakpoint = input<number>(
        this.options.verticalBreakpoint
    );
    readonly wide = input<boolean>(this.options.wide);
    readonly resizable = input<boolean>(this.options.resizable);
    readonly dtWidth = model<number | null>(this.options.dtWidth);
    readonly dtMinWidth = input<number | undefined>(
        this.options.dtMinWidth
    );
    readonly ddMinWidth = input<number | undefined>(
        this.options.ddMinWidth
    );
    readonly resizerAriaLabel = input<string | undefined>();
    readonly verticalAlign = input<KbqDlAlign>(
        this.options.verticalAlign
    );
    readonly horizontalAlign = input<KbqDlAlign>(
        this.options.horizontalAlign
    );
    readonly vertical = input<boolean | null>(this.options.vertical);
}

verticalBreakpointinputCopy link to verticalBreakpointnumber: Host width in pixels at or below which the list auto-switches to the vertical layout. Defaults to the app-wide KBQ_DL_OPTIONS.
wideinputCopy link to wideboolean: Whether the list uses the wide two-column layout. Defaults to the app-wide KBQ_DL_OPTIONS.
resizableinputCopy link to resizableboolean: Whether the kbq-dt area can be resized by dragging the separator. Defaults to the app-wide KBQ_DL_OPTIONS.
dtWidthmodelCopy link to dtWidthnumber | null: Width of the kbq-dt area in pixels; null restores the default column ratio. Defaults to the app-wide KBQ_DL_OPTIONS.
Writable: a drag or a double-click on the separator sets it, and dtWidthChange reports that back. model() would have been the shorter form, but it takes no transform, so an uncoerced attribute reached the layout arithmetic as a string and skipped the clamp against dtMinWidth.
dtMinWidthinputCopy link to dtMinWidthnumber | undefined: Minimum width of the kbq-dt area in pixels; defaults to the app-wide KBQ_DL_OPTIONS, then to the rendered term width.
ddMinWidthinputCopy link to ddMinWidthnumber | undefined: Minimum width retained for the kbq-dd area in pixels; defaults to the app-wide KBQ_DL_OPTIONS, then to the rendered term width.
resizerAriaLabelinputCopy link to resizerAriaLabelstring | undefined: Accessible name of the column resize separator; falls back to the localized default when omitted.
verticalAligninputCopy link to verticalAlignKbqDlAlign: Vertical alignment of kbq-dt and kbq-dd items. Defaults to the app-wide KBQ_DL_OPTIONS.
horizontalAligninputCopy link to horizontalAlignKbqDlAlign: Horizontal alignment of kbq-dt and kbq-dd items. Defaults to the app-wide KBQ_DL_OPTIONS.
verticalinputCopy link to verticalboolean | null: Forces the vertical layout; null lets the list decide based on verticalBreakpoint. Defaults to the app-wide KBQ_DL_OPTIONS.
localeOverridesinputCopy link to localeOverridesKbqPartialLocaleData | undefined: Localized strings for this element and its subtree, keyed by locale section. Every key is optional at every depth.

KbqDt

component

Term of a description list.

 @Component({ selector: 'kbq-dt' })
class KbqDt {}

Functions

kbqDlOptionsProvider

function

Overrides the default description list options within the given injector scope. The options it leaves out keep the values of the parent injector.

function kbqDlOptionsProvider(options: Partial<KbqDlOptions>): Provider;

Types

KbqDlAlign

type

Supported alignment values for description list items.

type KbqDlAlign = 'start' | 'center' | 'end';

KbqDlOptions

type

Configuration for KbqDl. Each input of a list overrides its option.

 type KbqDlOptions = {
    verticalBreakpoint: number;
    vertical: boolean | null;
    wide: boolean;
    resizable: boolean;
    dtWidth: number | null;
    dtMinWidth?: number;
    ddMinWidth?: number;
    verticalAlign: KbqDlAlign;
    horizontalAlign: KbqDlAlign;
};

verticalBreakpointCopy link to verticalBreakpointnumber: Host width in pixels at or below which a list switches to the vertical layout.
verticalCopy link to verticalboolean | null: Forces the vertical layout; null lets a list decide based on verticalBreakpoint.
wideCopy link to wideboolean: Whether a list uses the wide two-column layout.
resizableCopy link to resizableboolean: Whether the kbq-dt area can be resized by dragging the separator.
dtWidthCopy link to dtWidthnumber | null: Width of the kbq-dt area in pixels; null keeps the default column ratio.
dtMinWidthoptionalCopy link to dtMinWidthnumber: Minimum width of the kbq-dt area in pixels; defaults to the rendered term width.
ddMinWidthoptionalCopy link to ddMinWidthnumber: Minimum width retained for the kbq-dd area in pixels; defaults to the rendered term width.
verticalAlignCopy link to verticalAlignKbqDlAlign: Vertical alignment of kbq-dt and kbq-dd items.
horizontalAlignCopy link to horizontalAlignKbqDlAlign: Horizontal alignment of kbq-dt and kbq-dd items.

Constants

KBQ_DL_OPTIONS

const

Injection token holding the current KbqDlOptions.

const KBQ_DL_OPTIONS: InjectionToken<KbqDlOptions>;

If you found a mistake or want to improve the article, create an issue on GitHub.