@microsoft/teams.cards/dist/layouts/flow.d.ts

<p> <a href="https://www.npmjs.com/package/@microsoft/teams.cards" target="_blank"> <img src="https://img.shields.io/npm/v/@microsoft/teams.cards" /> </a> <a href="https://www.npmjs.com/package/@microsoft/teams.cards?activeTab=code" ta

import { HorizontalAlignment } from '../common/horizontal-alignment.js';
import { VerticalAlignment } from '../common/vertical-alignment.js';
import { Spacing } from '../common/spacing.js';
import { TargetWidth } from '../common/target-width.js';

/**
 * A layout that spreads elements horizontally and wraps them across multiple rows, as needed.
 */
interface IFlowLayout {
    type: 'Layout.Flow';
    /**
     * The space between items.
     * @default `default`
     */
    columnSpacing?: Spacing;
    /**
     * Controls how the content of the container should be horizontally aligned.
     * @default `center`
     */
    horizontalItemsAlignment?: HorizontalAlignment;
    /**
     * Controls how item should fit inside the container.
     * @default `Fit`
     */
    itemFit?: 'Fit' | 'Fill';
    /**
     * The width, in pixels, of each item, in the <number>px format. Should not be used if maxItemWidth and/or minItemWidth are set.
     * @example '<number>px'
     */
    itemWidth?: string;
    /**
     * The maximum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
     * @example '<number>px'
     */
    maxItemWidth?: string;
    /**
     * The minimum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
     * @example '<number>px'
     */
    minItemWidth?: string;
    /**
     * The space between rows of items.
     * @default `default`
     */
    rowSpacing?: Spacing;
    /**
     * Controls for which card width the layout should be used.
     */
    targetWidth?: TargetWidth;
    /**
     * Controls how the content of the container should be vertically aligned.
     * @default `top`
     */
    verticalItemsAlignment?: VerticalAlignment;
}
type FlowLayoutOptions = Omit<IFlowLayout, 'type'>;
/**
 * A layout that spreads elements horizontally and wraps them across multiple rows, as needed.
 */
declare class FlowLayout implements IFlowLayout {
    type: 'Layout.Flow';
    /**
     * The space between items.
     * @default `default`
     */
    columnSpacing?: Spacing;
    /**
     * Controls how the content of the container should be horizontally aligned.
     * @default `center`
     */
    horizontalItemsAlignment?: HorizontalAlignment;
    /**
     * Controls how item should fit inside the container.
     * @default `Fit`
     */
    itemFit?: 'Fit' | 'Fill';
    /**
     * The width, in pixels, of each item, in the <number>px format. Should not be used if maxItemWidth and/or minItemWidth are set.
     * @example '<number>px'
     */
    itemWidth?: string;
    /**
     * The maximum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
     * @example '<number>px'
     */
    maxItemWidth?: string;
    /**
     * The minimum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
     * @example '<number>px'
     */
    minItemWidth?: string;
    /**
     * The space between rows of items.
     * @default `default`
     */
    rowSpacing?: Spacing;
    /**
     * Controls for which card width the layout should be used.
     */
    targetWidth?: TargetWidth;
    /**
     * Controls how the content of the container should be vertically aligned.
     * @default `top`
     */
    verticalItemsAlignment?: VerticalAlignment;
    constructor(options?: FlowLayoutOptions);
    static from(options: FlowLayoutOptions): FlowLayout;
    withColumnSpacing(value: Spacing): this;
    withHorizontalAlignment(value: HorizontalAlignment): this;
    withItemFit(value: 'Fit' | 'Fill'): this;
    withItemWidth(value: string): this;
    withItemMinWidth(value: string): this;
    withItemMaxWidth(value: string): this;
    withRowSpacing(value: Spacing): this;
    withTargetWidth(value: TargetWidth): this;
    withVerticalAlignment(value: VerticalAlignment): this;
}

export { FlowLayout, type FlowLayoutOptions, type IFlowLayout };