Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface FlattenedLayoutComponentConfiguration<T>

Since the layout is a combination of multiple nested configurable components, it can be annoying to have to apply multiple levels of prop configurations to this root component. The main Layout flattens some of these props and components if this is preferable.

Example:

<Layout
  appBarProps={{
    title: "Current Page Title",
    navToggleProps: {
      "aria-label": "A custom label"
    }
  }}
  navProps={{
    navHeaderProps: {
      title: "Company Name"
      closeNavProps: {
        disabled: true,
      },
      treeProps: useLayoutNavigation(navItems, window.location.pathname),
    },
  }}
  {...props}
/>


// can also be written as
<Layout
  title="Current Page Title"
  navToggleProps={{
    "aria-label": "A custom label"
  }}
  navHeaderTitle="Current Page Title"
  closeNavProps={{ disabled: true }}
  treeProps={useLayoutNavigation(navItems, window.location.pathname)}
  {...props}
/>

Type parameters

Hierarchy

Index

Properties

Properties

Optional appBar

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

Optional appBarProps

appBarProps?: PropsWithRef<LayoutAppBarProps, HTMLDivElement>

Any additional props to provide to the default LayoutAppBar

Optional closeNav

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.

Optional closeNavProps

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

Any additional props to provide to the default LayoutCloseNavigationButton component.

Optional customTitle

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

Optional miniNav

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

Optional nav

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

Optional navHeader

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

Optional navHeaderProps

navHeaderProps?: PropsWithRef<PropsWithRef<LayoutNavigationHeaderProps, HTMLDivElement>, HTMLDivElement>

Any additional props to provide to the default LayoutNavigation component.

Optional navHeaderTitle

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.

Optional navHeaderTitleProps

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

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

Optional navProps

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

Any additional props to provide to the default LayoutNavigation.

Optional navToggle

navToggle?: ReactNode

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

Optional navToggleProps

navToggleProps?: PropsWithRef<LayoutNavToggleProps, HTMLButtonElement>

Any optional props to provide to the default LayoutNavToggle implementation.

Optional title

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.

Optional titleProps

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

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

Optional treeProps

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