FlowLayout class

Package:

@microsoft/teams.cards

A layout that spreads elements horizontally and wraps them across multiple rows, as needed.

Constructors

FlowLayout(FlowLayoutOptions)

Properties

columnSpacing	The space between items.
horizontalItemsAlignment	Controls how the content of the container should be horizontally aligned.
itemFit	Controls how item should fit inside the container.
itemWidth	The width, in pixels, of each item, in the <number>px format. Should not be used if maxItemWidth and/or minItemWidth are set.
maxItemWidth	The maximum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
minItemWidth	The minimum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.
rowSpacing	The space between rows of items.
targetWidth	Controls for which card width the layout should be used.
type	Must be Layout.Flow.
verticalItemsAlignment	Controls how the content of the container should be vertically aligned.

Methods

from(Omit<IFlowLayout, "type">)
withColumnSpacing(Spacing)
withHorizontalItemsAlignment(HorizontalAlignment)
withItemFit(FlowLayoutItemFit)
withItemWidth(string)
withMaxItemWidth(string)
withMinItemWidth(string)
withRowSpacing(Spacing)
withTargetWidth(TargetWidth)
withVerticalItemsAlignment(VerticalAlignment)

Constructor Details

FlowLayout(FlowLayoutOptions)

new FlowLayout(options?: FlowLayoutOptions)

Parameters

options

FlowLayoutOptions

Property Details

columnSpacing

The space between items.

columnSpacing?: Spacing

Property Value

Spacing

horizontalItemsAlignment

Controls how the content of the container should be horizontally aligned.

horizontalItemsAlignment?: HorizontalAlignment

Property Value

HorizontalAlignment

itemFit

Controls how item should fit inside the container.

itemFit?: FlowLayoutItemFit

Property Value

FlowLayoutItemFit

itemWidth

The width, in pixels, of each item, in the <number>px format. Should not be used if maxItemWidth and/or minItemWidth are set.

itemWidth?: string

Property Value

string

maxItemWidth

The maximum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.

maxItemWidth?: string

Property Value

string

minItemWidth

The minimum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set.

minItemWidth?: string

Property Value

string

rowSpacing

The space between rows of items.

rowSpacing?: Spacing

Property Value

Spacing

targetWidth

Controls for which card width the layout should be used.

targetWidth?: TargetWidth

Property Value

TargetWidth

type

Must be Layout.Flow.

type: "Layout.Flow" = "Layout.Flow"

Property Value

"Layout.Flow"

verticalItemsAlignment

Controls how the content of the container should be vertically aligned.

verticalItemsAlignment?: VerticalAlignment

Property Value

VerticalAlignment

Method Details

from(Omit<IFlowLayout, "type">)

static function from(options: Omit<IFlowLayout, "type">): FlowLayout

Parameters

options

Omit<IFlowLayout, "type">

Returns

FlowLayout

withColumnSpacing(Spacing)

function withColumnSpacing(columnSpacing: Spacing): FlowLayout

Parameters

columnSpacing

Spacing

Returns

FlowLayout

withHorizontalItemsAlignment(HorizontalAlignment)

function withHorizontalItemsAlignment(horizontalItemsAlignment: HorizontalAlignment): FlowLayout

Parameters

horizontalItemsAlignment

HorizontalAlignment

Returns

FlowLayout

withItemFit(FlowLayoutItemFit)

function withItemFit(itemFit: FlowLayoutItemFit): FlowLayout

Parameters

itemFit

FlowLayoutItemFit

Returns

FlowLayout

withItemWidth(string)

function withItemWidth(itemWidth: string): FlowLayout

Parameters

itemWidth

string

Returns

FlowLayout

withMaxItemWidth(string)

function withMaxItemWidth(maxItemWidth: string): FlowLayout

Parameters

maxItemWidth

string

Returns

FlowLayout

withMinItemWidth(string)

function withMinItemWidth(minItemWidth: string): FlowLayout

Parameters

minItemWidth

string

Returns

FlowLayout

withRowSpacing(Spacing)

function withRowSpacing(rowSpacing: Spacing): FlowLayout

Parameters

rowSpacing

Spacing

Returns

FlowLayout

withTargetWidth(TargetWidth)

function withTargetWidth(targetWidth: TargetWidth): FlowLayout

Parameters

targetWidth

TargetWidth

Returns

FlowLayout

withVerticalItemsAlignment(VerticalAlignment)

function withVerticalItemsAlignment(verticalItemsAlignment: VerticalAlignment): FlowLayout

Parameters

verticalItemsAlignment

VerticalAlignment

Returns

FlowLayout