@microsoft/teams.cards
Version:
<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
134 lines (131 loc) • 3.79 kB
TypeScript
import { Spacing } from '../common/spacing.js';
import { TargetWidth } from '../common/target-width.js';
/**
* A layout that divides a container into named areas into which elements can be placed.
*/
interface IAreaGridLayout {
type: 'Layout.AreaGrid';
/**
* The areas in the grid layout.
*/
areas: IGridArea[];
/**
* The columns in the grid layout, defined as a percentage of the available width or in pixels using the <number>px format.
*/
columns: (number | string)[];
/**
* The space between columns.
* @default `default`
*/
columnSpacing?: Spacing;
/**
* The space between rows.
* @default `default`
*/
rowSpacing?: Spacing;
/**
* Controls for which card width the layout should be used.
*/
targetWidth?: TargetWidth;
}
type AreaGridLayoutOptions = Omit<IAreaGridLayout, 'type' | 'areas' | 'columns'>;
/**
* A layout that divides a container into named areas into which elements can be placed.
*/
declare class AreaGridLayout implements IAreaGridLayout {
type: 'Layout.AreaGrid';
/**
* The areas in the grid layout.
*/
areas: IGridArea[];
/**
* The columns in the grid layout, defined as a percentage of the available width or in pixels using the <number>px format.
*/
columns: (number | string)[];
/**
* The space between columns.
* @default `default`
*/
columnSpacing?: Spacing;
/**
* The space between rows.
* @default `default`
*/
rowSpacing?: Spacing;
/**
* Controls for which card width the layout should be used.
*/
targetWidth?: TargetWidth;
constructor(...areas: IGridArea[]);
static from(options: Omit<IAreaGridLayout, 'type'>): AreaGridLayout;
withColumnSpacing(value: Spacing): this;
withRowSpacing(value: Spacing): this;
withTargetWidth(value: TargetWidth): this;
addAreas(...value: IGridArea[]): this;
addColumns(...value: (number | string)[]): this;
}
/**
* Defines an area in a Layout.AreaGrid layout.
*/
interface IGridArea {
/**
* The start column index of the area. Column indices start at 1.
* @default 1
*/
column?: number;
/**
* Defines how many columns the area should span.
* @default 1
*/
columnSpan?: number;
/**
* The name of the area. To place an element in this area, set its grid.area property to match the name of the area.
*/
name?: string;
/**
* The start row index of the area. Row indices start at 1.
* @default 1
*/
row?: number;
/**
* Defines how many rows the area should span.
* @default 1
*/
rowSpan?: number;
}
/**
* Defines an area in a Layout.AreaGrid layout.
*/
declare class GridArea implements IGridArea {
/**
* The start column index of the area. Column indices start at 1.
* @default 1
*/
column?: number;
/**
* Defines how many columns the area should span.
* @default 1
*/
columnSpan?: number;
/**
* The name of the area. To place an element in this area, set its grid.area property to match the name of the area.
*/
name?: string;
/**
* The start row index of the area. Row indices start at 1.
* @default 1
*/
row?: number;
/**
* Defines how many rows the area should span.
* @default 1
*/
rowSpan?: number;
constructor(value?: IGridArea);
withColumn(value: number, span?: number): this;
withColumnSpan(value: number): this;
withName(value: string): this;
withRow(value: number, span?: number): this;
withRowSpan(value: number): this;
}
export { AreaGridLayout, type AreaGridLayoutOptions, GridArea, type IAreaGridLayout, type IGridArea };