Container class
A container for other elements. Use containers for styling purposes and/or to logically group a set of elements together, which can be especially useful when used with Action.ToggleVisibility.
Constructors
| Container(Card |
Properties
| background |
Defines the container's background image. |
| bleed | Controls if the container should bleed into its parent. A bleeding container extends into its parent's padding. |
| fallback | An alternate element to render if the type of this one is unsupported or if the host application doesn't support all the capabilities specified in the requires property. |
| grid. |
The area of a Layout.AreaGrid layout in which an element should be displayed. |
| height | The height of the element. When set to stretch, the element will use the remaining vertical space in its container. |
| horizontal |
Controls how the element should be horizontally aligned. |
| id | A unique identifier for the element or action. Input elements must have an id, otherwise they will not be validated and their values will not be sent to the Bot. |
| is |
Controls whether the element should be used as a sort key by elements that allow sorting across a collection of elements. |
| is |
Controls the visibility of the element. |
| items | The elements in the container. |
| lang | The locale associated with the element. |
| layouts | The layouts associated with the container. The container can dynamically switch from one layout to another as the card's width changes. See Container layouts for more details. |
| max |
The maximum height, in pixels, of the container, in the |
| min |
The minimum height, in pixels, of the container, in the |
| requires | A list of capabilities the element requires the host application to support. If the host application doesn't support at least one of the listed capabilities, the element is not rendered (or its fallback is rendered if provided). |
| rounded |
Controls if the container should have rounded corners. |
| rtl | Controls if the content of the card is to be rendered left-to-right or right-to-left. |
| select |
An Action that will be invoked when the element is tapped or clicked. Action.ShowCard is not supported. |
| separator | Controls whether a separator line should be displayed above the element to visually separate it from the previous element. No separator will be displayed for the first element in a container, even if this property is set to true. |
| show |
Controls if a border should be displayed around the container. |
| spacing | Controls the amount of space between this element and the previous one. No space will be added for the first element in a container. |
| style | The style of the container. Container styles control the colors of the background, border and text inside the container, in such a way that contrast requirements are always met. |
| target |
Controls for which card width the element should be displayed. If targetWidth isn't specified, the element is rendered at all card widths. Using targetWidth makes it possible to author responsive cards that adapt their layout to the available horizontal space. For more details, see Responsive layout. |
| type | Must be Container. |
| vertical |
Controls how the container's content should be vertically aligned. |
Methods
Constructor Details
Container(CardElementArray)
Property Details
backgroundImage
Defines the container's background image.
backgroundImage?: string | IBackgroundImageProperty Value
string | IBackgroundImage
bleed
Controls if the container should bleed into its parent. A bleeding container extends into its parent's padding.
bleed?: booleanProperty Value
boolean
fallback
An alternate element to render if the type of this one is unsupported or if the host application doesn't support all the capabilities specified in the requires property.
fallback?: FallbackElementProperty Value
grid.area
The area of a Layout.AreaGrid layout in which an element should be displayed.
grid.area?: stringProperty Value
string
height
The height of the element. When set to stretch, the element will use the remaining vertical space in its container.
height?: ElementHeightProperty Value
horizontalAlignment
Controls how the element should be horizontally aligned.
horizontalAlignment?: HorizontalAlignmentProperty Value
id
A unique identifier for the element or action. Input elements must have an id, otherwise they will not be validated and their values will not be sent to the Bot.
id?: stringProperty Value
string
isSortKey
Controls whether the element should be used as a sort key by elements that allow sorting across a collection of elements.
isSortKey?: booleanProperty Value
boolean
isVisible
Controls the visibility of the element.
isVisible?: booleanProperty Value
boolean
items
lang
The locale associated with the element.
lang?: stringProperty Value
string
layouts
The layouts associated with the container. The container can dynamically switch from one layout to another as the card's width changes. See Container layouts for more details.
layouts?: (IStackLayout | IFlowLayout | IAreaGridLayout)[]Property Value
(IStackLayout | IFlowLayout | IAreaGridLayout)[]
maxHeight
The maximum height, in pixels, of the container, in the <number>px format. When the content of a container exceeds the container's maximum height, a vertical scrollbar is displayed.
maxHeight?: stringProperty Value
string
minHeight
The minimum height, in pixels, of the container, in the <number>px format.
minHeight?: stringProperty Value
string
requires
A list of capabilities the element requires the host application to support. If the host application doesn't support at least one of the listed capabilities, the element is not rendered (or its fallback is rendered if provided).
requires?: IHostCapabilitiesProperty Value
roundedCorners
Controls if the container should have rounded corners.
roundedCorners?: booleanProperty Value
boolean
rtl
Controls if the content of the card is to be rendered left-to-right or right-to-left.
rtl?: booleanProperty Value
boolean
selectAction
An Action that will be invoked when the element is tapped or clicked. Action.ShowCard is not supported.
selectAction?: IExecuteAction | IOpenUrlAction | IResetInputsAction | ISubmitAction | IToggleVisibilityActionProperty Value
separator
Controls whether a separator line should be displayed above the element to visually separate it from the previous element. No separator will be displayed for the first element in a container, even if this property is set to true.
separator?: booleanProperty Value
boolean
showBorder
Controls if a border should be displayed around the container.
showBorder?: booleanProperty Value
boolean
spacing
Controls the amount of space between this element and the previous one. No space will be added for the first element in a container.
spacing?: SpacingProperty Value
style
The style of the container. Container styles control the colors of the background, border and text inside the container, in such a way that contrast requirements are always met.
style?: ContainerStyleProperty Value
targetWidth
Controls for which card width the element should be displayed. If targetWidth isn't specified, the element is rendered at all card widths. Using targetWidth makes it possible to author responsive cards that adapt their layout to the available horizontal space. For more details, see Responsive layout.
targetWidth?: TargetWidthProperty Value
type
Must be Container.
type: "Container" = "Container"Property Value
"Container"
verticalContentAlignment
Controls how the container's content should be vertically aligned.
verticalContentAlignment?: VerticalAlignmentProperty Value
Method Details
withBackgroundImage(string | IBackgroundImage)
function withBackgroundImage(backgroundImage: string | IBackgroundImage): ContainerParameters
- backgroundImage
-
string | IBackgroundImage
Returns
withBleed(boolean)
withFallback(FallbackElement)
function withFallback(fallback: FallbackElement): ContainerParameters
- fallback
- FallbackElement
Returns
withHeight(ElementHeight)
withHorizontalAlignment(HorizontalAlignment)
function withHorizontalAlignment(horizontalAlignment: HorizontalAlignment): ContainerParameters
- horizontalAlignment
- HorizontalAlignment
Returns
withId(string)
withIsSortKey(boolean)
function withIsSortKey(isSortKey?: boolean): ContainerParameters
- isSortKey
-
boolean
Returns
withIsVisible(boolean)
function withIsVisible(isVisible?: boolean): ContainerParameters
- isVisible
-
boolean
Returns
withItems(CardElementArray)
withLang(string)
withLayouts((IStackLayout | IFlowLayout | IAreaGridLayout)[])
function withLayouts(layouts: (IStackLayout | IFlowLayout | IAreaGridLayout)[]): ContainerParameters
- layouts
-
(IStackLayout | IFlowLayout | IAreaGridLayout)[]
Returns
withMaxHeight(string)
withMinHeight(string)
withOptions(ContainerOptions)
withRequires(IHostCapabilities)
function withRequires(requires: IHostCapabilities): ContainerParameters
- requires
- IHostCapabilities
Returns
withRoundedCorners(boolean)
function withRoundedCorners(roundedCorners?: boolean): ContainerParameters
- roundedCorners
-
boolean
Returns
withRtl(boolean)
withSelectAction(IExecuteAction | IOpenUrlAction | IResetInputsAction | ISubmitAction | IToggleVisibilityAction)
function withSelectAction(selectAction: IExecuteAction | IOpenUrlAction | IResetInputsAction | ISubmitAction | IToggleVisibilityAction): ContainerParameters
- selectAction
-
IExecuteAction | IOpenUrlAction | IResetInputsAction | ISubmitAction | IToggleVisibilityAction
Returns
withSeparator(boolean)
function withSeparator(separator?: boolean): ContainerParameters
- separator
-
boolean
Returns
withShowBorder(boolean)
function withShowBorder(showBorder?: boolean): ContainerParameters
- showBorder
-
boolean
Returns
withSpacing(Spacing)
withStyle(ContainerStyle)
withTargetWidth(TargetWidth)
function withTargetWidth(targetWidth: TargetWidth): ContainerParameters
- targetWidth
- TargetWidth
Returns
withVerticalContentAlignment(VerticalAlignment)
function withVerticalContentAlignment(verticalContentAlignment: VerticalAlignment): ContainerParameters
- verticalContentAlignment
- VerticalAlignment