Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface LayoutProps<T>

Type parameters

Hierarchy

Index

Properties

appBar?: ReactNode

A custom implementation for the main AppBar within the Layout that will be used instead of the default LayoutAppBar if it is not undefined. This means that if you don't want to use an AppBar at all in your application, set this value to null.

Using this prop will make the following props do nothing:

  • appBarProps
  • customTitle
  • title
  • titleProps
appBarProps?: PropsWithRef<LayoutAppBarProps, HTMLDivElement>

Any additional props to provide to the default LayoutAppBar

children?: ReactNode

The children to display within the layout. This is pretty much required since you'll have an empty app otherwise, but it's left as optional just for prototyping purposes.

closeNav?: ReactNode

A custom implementation for the button that closes the toggleable layouts. If this is not undefined, it will be used instead of the default implementation.

The default implementation for this component will be to only render for toggleable layouts and close the navigation panel once clicked.

Using this prop will make the closeNavProps do nothing.

closeNavProps?: PropsWithRef<PropsWithRef<LayoutCloseNavigationButtonProps, HTMLButtonElement>, HTMLButtonElement>

Any additional props to provide to the default LayoutCloseNavigationButton component.

customTitle?: ReactNode

A custom implementation for the main AppBarTitle within the Layout that will be used instead of the default LayoutAppBarTitle if it is not undefined. This means that if you don't want to have a title within the main AppBar, set this value to null.

Using this prop will make the following props do nothing:

  • title
  • titleProps
defaultToggleableVisible?: boolean | "toggleable" | "toggleable-mini"

This prop is used to be able to update the toggleable layouts to start visible/expanded instead of requiring the toggle button to be pressed.

If this is:

  • "toggleable" - the "toggleable-mini" variant will still require a button click to be visible
  • "toggleable-mini" - the "toggleable" variant will still require a button click to be visible
  • true - both toggleable variants will start visible
  • false | undefined - both toggleable variants will require a button click to be visible
remarks

@since 2.6.0

desktopLayout?: SupportedWideLayout

The type of layout to use when your app is viewed on a desktop sized screen.

id?: string

The base id to use for everything within the layout component. The id will be applied to:

  • the LayoutAppBar as ${id}-header
  • the AppBarTitle as ${id}-title
  • the LayoutNavToggle as ${id}-nav-toggle
  • the LayoutMain element as ${id}-main
landscapeTabletLayout?: SupportedWideLayout

The type of layout to use when your app is viewed on a landscape tablet sized screen.

largeDesktopLayout?: SupportedWideLayout

The type of layout to use when your app is viewed on a large desktop sized screen.

Note: Unlike all the other layout types, this one will automatically inherit the desktopLayout if it is omitted.

mainProps?: PropsWithRef<LayoutMainProps, HTMLDivElement>

Any optional props to provide to the <main> element of the page.

miniNav?: ReactNode

A custom implementation for the main mini navigation component within the Layout. If this is not undefined, it will be used instead of the default implementation.

Using this prop will make the following props do nothing for the mini nav:

  • navProps
  • navHeader
  • navHeaderProps
  • navHeaderTitle
  • navHeaderTitleProps
  • closeNav
  • closeNavProps
  • treeProps
remarks

@since.2.7.0

miniNavItems?: TreeData<T>

An optional tree to use for the mini navigation pane since the default behavior of rendering mini tree items might hide content in an undesirable way.

remarks

@since 2.7.0

see

defaultMiniNavigationItemRenderer for more information

miniWrapperProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>

This prop allows you to provide additional props to the <div> surrounding the LayoutMain and mini LayoutNavigation components.

Note: This additional <div> will only be rendered if:

  • at least one of the provided layout types are mini
  • the layout is not using a fixed app bar
  • the miniNav prop has not been defined
  • treeProps have been provided
remarks

@since 2.8.3

remarks

@since 2.9.1 This will render if any provided layout type is mini.

nav?: ReactNode

A custom implementation for the main navigation component within the Layout. If this is not undefined, it will be used instead of the default implementation.

Using this prop will make the following props do nothing:

  • navProps
  • navHeader
  • navHeaderProps
  • navHeaderTitle
  • navHeaderTitleProps
  • closeNav
  • closeNavProps
  • treeProps
navAfterAppBar?: boolean

Boolean if the main app bar should appear after the navigation component. It is generally recommended to enable this prop if the navigation component as a focusable element in the header since it will have a better tab focus order.

navHeader?: ReactNode

A custom implementation for the main navigation component's header element within the Layout. If this is not undefined, it will be used instead of the default implementation.

Using this prop will make the following props do nothing:

  • navHeaderProps
  • navHeaderTitle
  • navHeaderTitleProps
  • closeNav
  • closeNavProps
navHeaderProps?: PropsWithRef<PropsWithRef<LayoutNavigationHeaderProps, HTMLDivElement>, HTMLDivElement>

Any additional props to provide to the default LayoutNavigation component.

navHeaderTitle?: ReactNode

An optional title to display within the LayoutNavigation's header component. This will be defaulted to being wrapped with an AppBarTitle component for additional styling.

navHeaderTitleProps?: PropsWithRef<PropsWithRef<PropsWithRef<AppBarProps, HTMLDivElement>, HTMLDivElement>, HTMLDivElement>

Any additional props to provide to the AppBarTitle surrounding the navHeaderTitle.

navProps?: PropsWithRef<LayoutNavigationProps<T>, HTMLDivElement>

Any additional props to provide to the default LayoutNavigation.

navToggle?: ReactNode

An optional custom nav toggle to use within the Layout or LayoutAppBar instead of the default implementation.

navToggleProps?: PropsWithRef<LayoutNavToggleProps, HTMLButtonElement>

Any optional props to provide to the default LayoutNavToggle implementation.

phoneLayout?: SupportedPhoneLayout

The type of layout to use when your app is viewed on a phone sized screen.

skipProps?: Omit<SkipToMainContentProps, "mainId">

Any additional props to provide to the <SkipToMainContent /> link that is automatically rendered in the layout.

tabletLayout?: SupportedTabletLayout

The type of layout to use when your app is viewed on a portrait tabled sized screen.

title?: ReactNode

An optional main title to display in the Layout. This should normally be something like the page title since it will be rendered in the default AppBar for the Layout.

titleProps?: PropsWithRef<Omit<AppBarTitleProps, "children">, HTMLHeadingElement>

Any additional props that should be applied to the layout's default AppBarTitle.

treeProps?: PropsWithRef<LayoutTreeProps<T>, HTMLUListElement>

This is the most important prop within the Layout if you want to have a navigation tree. This prop should normally be created by using the useLayoutNavigation hook but you can always provide any additional props that are required to style or customize your tree.

Example:

<Layout
treeProps={useLayoutNavigation(navItems, window.location.pathname)}
{...props}
/>

or with additional props:

<Layout
treeProps={{
...useLayoutNavigation(navItems, window.location.pathname),
...otherTreeProps
}}
{...props}
/>

Please see the useLayoutNavigation hook for additional documentation.

Generated using TypeDoc