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);
}

verticalBreakpointinputСкопировать ссылку на 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.
wideinputСкопировать ссылку на wideboolean: Whether the list uses the wide two-column layout. Defaults to the app-wide KBQ_DL_OPTIONS.
resizableinputСкопировать ссылку на resizableboolean: Whether the kbq-dt area can be resized by dragging the separator. Defaults to the app-wide KBQ_DL_OPTIONS.
dtWidthmodelСкопировать ссылку на 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.
dtMinWidthinputСкопировать ссылку на 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.
ddMinWidthinputСкопировать ссылку на 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.
resizerAriaLabelinputСкопировать ссылку на resizerAriaLabelstring | undefined: Accessible name of the column resize separator; falls back to the localized default when omitted.
verticalAligninputСкопировать ссылку на verticalAlignKbqDlAlign: Vertical alignment of kbq-dt and kbq-dd items. Defaults to the app-wide KBQ_DL_OPTIONS.
horizontalAligninputСкопировать ссылку на horizontalAlignKbqDlAlign: Horizontal alignment of kbq-dt and kbq-dd items. Defaults to the app-wide KBQ_DL_OPTIONS.
verticalinputСкопировать ссылку на verticalboolean | null: Forces the vertical layout; null lets the list decide based on verticalBreakpoint. Defaults to the app-wide KBQ_DL_OPTIONS.
localeOverridesinputСкопировать ссылку на 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;
};

verticalBreakpointСкопировать ссылку на verticalBreakpointnumber: Host width in pixels at or below which a list switches to the vertical layout.
verticalСкопировать ссылку на verticalboolean | null: Forces the vertical layout; null lets a list decide based on verticalBreakpoint.
wideСкопировать ссылку на wideboolean: Whether a list uses the wide two-column layout.
resizableСкопировать ссылку на resizableboolean: Whether the kbq-dt area can be resized by dragging the separator.
dtWidthСкопировать ссылку на dtWidthnumber | null: Width of the kbq-dt area in pixels; null keeps the default column ratio.
dtMinWidthoptionalСкопировать ссылку на dtMinWidthnumber: Minimum width of the kbq-dt area in pixels; defaults to the rendered term width.
ddMinWidthoptionalСкопировать ссылку на ddMinWidthnumber: Minimum width retained for the kbq-dd area in pixels; defaults to the rendered term width.
verticalAlignСкопировать ссылку на verticalAlignKbqDlAlign: Vertical alignment of kbq-dt and kbq-dd items.
horizontalAlignСкопировать ссылку на 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>;

Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.