Stack

link - developer.microsoft.com/en-us/fluentui#/controls/web/stack
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 (
      <div>

        <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" />
          </Stack>
        </Stack>

      </div >
    )
  }




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