layout

Components to help layout Hub apps.

See the storybook/OverflowToggle or storybook/PageLayout for demos.

Installation#

npm install @iqmetrix/layout

Components#

OverflowToggle#

Switches between two sets of children depending on overflow.

Props#

NameTypeRequiredDefaultDescription
children.defaultReactNodeyesThe children to render when not overflowed
children.overflowReactNodeyesThe children to render when overflowed
ContainerJSXElementConstructor<{ style: CSSProperties }>nodivThe Container component to wrap children.default

PageLayout#

Handling the overall layout of a page.

Props#

NameTypeRequiredDefaultDescription
children.headerReactNodeyesThe header of the page
children.messagesReactNodenoThe content under header, like alerts
children.contentLayoutContent[]yesThe primary content on the page, can be nested
children.content.primaryContent or ReactNodeyesTakes up 2/3 of the content and is the first row when screen gets small enough
children.content.secondaryContent or ReactNodenoTakes up 1/3 of the content and is the second row when screen gets small enough
children.ternaryReactNodenoFooter of the page, for page actions
sizeSizenosmallSize 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#

// The component accepts an array of LayoutContent for primary and secondary content
interface LayoutContent = {
primary: Content | React.ReactNode;
secondary?: Content | React.ReactNode;
}
// When the content has its own children, is a nested component
type Content = {
children: React.ReactNode;
affix?: boolean;
};
// Size of the layout
type Size = "small" | "full";

Notes#

  • All elements inside Layout Content props should have 20px space between elements. For example 2 cards inside children.content.primary should have 20px space between each other.
  • Design Azure user story

Sources#

Last updated on by Paulo Andrade