| title | description | author | ms.author | ms.topic | ms.date | ms.reviewer | audience | ms.search.region |
|---|---|---|---|---|---|---|---|---|
Design type |
Learn about the design object type, which includes the alignItems, alignSelf, bindings, border, color, flexFlow, flexSize and other properties. |
jasongre |
jasongre |
article |
05/26/2022 |
johnmichalak |
Developer |
Global |
[!include banner] [!include mobile app deprecated]
Design object type. For more information on design, please reference the Design Introduction.
Design
└─ PageLinkDesign
└─ ContainerControlDesign
└─ InputControlDesign
└─ ImageDesign
- alignItems
- alignSelf
- bindings
- border
- color
- flexFlow
- flexSize
- fontSize
- fontWeight
- justifyItems
- label
- labelPosition
- name
- padding
- type
alignItems: string (optional)
This property is an alias for the CSS property "align-items". Please refer to this web page for documentation on the "align-items" property.
alignSelf: string (optional)
bindings: any (optional)
border: "none" | "solid" | "left" | "right" | "top" | "bottom" (optional)
The border behavior of a control. This property will not be inherited by the children.
color: string (optional)
The foreground color of the container.
This will modify the color of all headers, items, labels, and icons within the container.
Consider setting the background color at the same time as necessary when setting this attribute.
Note: if color is set to "theme", the theme color of the app will be used.
The following colors are available:
flexFlow: string (optional)
Specifying this property makes the component a flex container component. This property is an alias for the CSS property "flex-flow". Please refer to this web page for documentation on the "flex-flow" property.
flexSize: string (optional)
One number or two numbers written as a string. For example, "(size to grow) [(size-to-shrink)]" to accommodate available space in the immediate flex container. This property is an alias for the CSS property "flex". Please refer to this web page for documentation on the "flex" property.
fontSize: "medium" | "xx-small" | "x-small" | "small" | "large" | "x-large" | "xx-large" (optional)
The proportional text size
fontWeight: "normal" | "bold" (optional)
Normal or bold text.
justifyItems: "flex-start" | "flex-end" | "center" | "space-between" (optional)
This property is an alias for the CSS property "justify-content". Please refer to this web page for documentation on the "justify-content" property.
label: string (optional)
labelPosition: "stacked" | "hidden" | "inline" (optional)
Determines how a label is positioned, if at all. By default, labelPosition is set to stacked.
name: string (optional)
padding: "none" | "small" | "std" (optional)
Allows specifying the component's padding behavior. A component will inherit the padding behavior specified by its parent container components.
type: ControlType (optional)
The type of the control as a string.
[!INCLUDEfooter-include]