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. Example '<number>px'
maxItemWidth	The maximum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set. Example '<number>px'
minItemWidth	The minimum width, in pixels, of each item, in the <number>px format. Should not be used if itemWidth is set. Example '<number>px'
rowSpacing	The space between rows of items.
targetWidth	Controls for which card width the layout should be used.
type
verticalItemsAlignment	Controls how the content of the container should be vertically aligned.

Methods

from(FlowLayoutOptions)
withColumnSpacing(Spacing)
withHorizontalAlignment(HorizontalAlignment)
withItemFit("Fit" | "Fill")
withItemMaxWidth(string)
withItemMinWidth(string)
withItemWidth(string)
withRowSpacing(Spacing)
withTargetWidth(TargetWidth)
withVerticalAlignment(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?: "Fit" | "Fill"

Property Value

"Fit" | "Fill"

itemWidth

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

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.

Example

'<number>px'

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.

Example

'<number>px'

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

type: "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(FlowLayoutOptions)

static function from(options: FlowLayoutOptions): FlowLayout

Parameters

options

FlowLayoutOptions

Returns

FlowLayout

withColumnSpacing(Spacing)

function withColumnSpacing(value: Spacing): FlowLayout

Parameters

value

Spacing

Returns

FlowLayout

withHorizontalAlignment(HorizontalAlignment)

function withHorizontalAlignment(value: HorizontalAlignment): FlowLayout

Parameters

value

HorizontalAlignment

Returns

FlowLayout

withItemFit("Fit" | "Fill")

function withItemFit(value: "Fit" | "Fill"): FlowLayout

Parameters

value

"Fit" | "Fill"

Returns

FlowLayout

withItemMaxWidth(string)

function withItemMaxWidth(value: string): FlowLayout

Parameters

value

string

Returns

FlowLayout

withItemMinWidth(string)

function withItemMinWidth(value: string): FlowLayout

Parameters

value

string

Returns

FlowLayout

withItemWidth(string)

function withItemWidth(value: string): FlowLayout

Parameters

value

string

Returns

FlowLayout

withRowSpacing(Spacing)

function withRowSpacing(value: Spacing): FlowLayout

Parameters

value

Spacing

Returns

FlowLayout

withTargetWidth(TargetWidth)

function withTargetWidth(value: TargetWidth): FlowLayout

Parameters

value

TargetWidth

Returns

FlowLayout

withVerticalAlignment(VerticalAlignment)

function withVerticalAlignment(value: VerticalAlignment): FlowLayout

Parameters

value

VerticalAlignment

Returns

FlowLayout