ColumnSet
ColumnSet divides a region into Columns, allowing elements to sit side-by-side.
Interface
interface IColumnSet extends IElement {
columns: IColumn[];
horizontalAlignment?: HorizontalAlignment;
}
Example
ColumnSet
{
"type": "ColumnSet",
"style": {
"marginTop": "10px"
},
"columns": [
{
"type": "Column",
"horizontalAlignment": "center",
"style": {
"width": "30px"
},
"items": [
{
"type": "Image",
"url": "{base.author.picture}",
"person": true,
"size": 2,
"style": {
"width": "40px",
"marginLeft": "15px"
},
"livePersonaCard": {
"displayName": "{base.author.name}",
"email": "{base.author.email}",
"loginName": "{base.author.loginName}"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "small",
"text": "{base.author.name}",
"onClick": {
"type": "OpenUrl",
"url": "@eval({base.author.pageDetailUrl}+'&'+{base.author.name})"
},
"style": {
"color": "#999999"
}
},
{
"type": "Date",
"date": "@eval({base.publishingDate} || {base.modifiedDate})",
"size": "small",
"fromNow": true,
"style": {
"marginTop": "-5px",
"color": "#999999"
}
}
]
}
]
}
Properties
type
Must be “ColumnSet”
-
Type:
"ColumnSet"
-
Required: Yes
columns
The array of columns to divide the region into.
-
Type:
IColumn[]
-
Required: Yes
horizontalAlignment
Represents the horizontal alignment for the container
-
Type:
HorizontalAlignment
-
Required: No