layout
Components to help layout Hub apps.
See the storybook/OverflowToggle or storybook/PageLayout for demos.
#
Installation#
ComponentsOverflowToggle
#
Switches between two sets of children depending on overflow.
#
PropsName | Type | Required | Default | Description |
---|---|---|---|---|
children.default | ReactNode | yes | The children to render when not overflowed | |
children.overflow | ReactNode | yes | The children to render when overflowed | |
Container | JSXElementConstructor<{ style: CSSProperties }> | no | div | The Container component to wrap children.default |
PageLayout
#
Handling the overall layout of a page.
#
PropsName | Type | Required | Default | Description |
---|---|---|---|---|
children.header | ReactNode | yes | The header of the page | |
children.messages | ReactNode | no | The content under header, like alerts | |
children.content | LayoutContent[] | yes | The primary content on the page, can be nested | |
children.content.primary | Content or ReactNode | yes | Takes up 2/3 of the content and is the first row when screen gets small enough | |
children.content.secondary | Content or ReactNode | no | Takes up 1/3 of the content and is the second row when screen gets small enough | |
children.ternary | ReactNode | no | Footer of the page, for page actions | |
size | Size | no | small | Size of the page, small and centered or full width. Small size is fixed after 950px . For full width, the max-width of the page content is fixed after 2000px |
#
Interfaces#
Notes- All elements inside
Layout Content props
should have20px
space between elements. For example 2 cards insidechildren.content.primary
should have20px
space between each other. - Design Azure user story