link -
A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.
We can control:
Direction: By adding vertical or horizontal properties,
Alignment: using verticalAlign and horizontalAlign` properties,
Spacing: by adding gap and verticleGap properties.

const stackTokens = { 
  childrenGap: 50

Defines the spacing between Stack children.
The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
If 'column gap' is omitted, it's set to the same value as 'row gap'.

const stackStyles: Partial<IStackStyles> = { 
  root: {
    width: 650
const columnProps: Partial<IStackProps> = {
  tokens: {
    childrenGap: 15
  styles: {
    root: {
      width: 150

  render(): JSX.Element {

    return (

        <Stack horizontal tokens={stackTokens} styles={stackStyles}>
          <Stack {...columnProps}>
            <TextField label="Platform:" readOnly defaultValue="PC" />
            <TextField label="Host:" readOnly defaultValue="Word" />
            <TextField label="Office API:" readOnly defaultValue="1.3" />
            <TextField label="Add-in Version:" readOnly defaultValue="1.0" />

      </div >

© 2023 Better Solutions Limited. All Rights Reserved. © 2023 Better Solutions Limited TopPrevNext