Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/layout

Index

Interfaces

Type aliases

Variables

Functions

Type aliases

BaseLayoutTreeProps

BaseLayoutTreeProps<T>: Omit<TreeProps<T>, "id" | "data" | "aria-label" | "aria-labelledby">

Type parameters

LayoutAppBarTitleProps

LayoutAppBarTitleProps: AppBarTitleProps

LayoutNavigationSheetProps

LayoutNavigationSheetProps: Omit<SheetProps, "id" | "role" | "component" | "visible" | "onRequestClose" | "disableScrollLock" | "disableTabFocusWrap">

LayoutNavigationTree

LayoutNavigationTree<T>: TreeData<T>

The layout navigation tree. It is recommended to set this up so that each itemId within your tree is the route that the link should be. For example:

const navItems: LayoutNavigationTree = {
  "/": {
    itemId: "/",
    parentId: null,
    children: "Home",
    leftAddon: <HomeSVGIcon />,
    to: "/",
    contentComponent: Link,
  },
  "/route-1": {
    itemId: "/route-1",
    parentId: null,
    children: "Route 1",
    leftAddon: <TVSVGIcon />,
    to: "/route-1",
    contentComponent: Link,
  },
  "/route-2": {
    itemId: "/route-2",
    parentId: null,
    children: "Route 2",
    leftAddon: <AppsSVGIcon />,
    to: "/route-2",
    contentComponent: Link,
  },
  "/route-3": {
    itemId: "/route-3",
    parentId: null,
    children: "Route 3",
    leftAddon: <BookSVGIcon />,
    to: "/route-3",
    contentComponent: Link,
  },
};

This will work amazingly with the provided useLayoutNavigation hook.

Type parameters

SupportedPhoneLayout

SupportedPhoneLayout: "temporary" | "temporary-mini"

Due to the limited screen size for phones, the layout only supports having temporary navigation with an optional persistent mini navigation.

A temporary navigation will create a Sheet that renders your navigation items and will only become visible when the main AppBarNav component has been clicked. Once a navigation item within this sheet has been clicked, the sheet will automatically close.

A temporary mini navigation will extend the temporary navigation as well as showing a persistent mini navigation that is icons only for different routes.

SupportedTabletLayout

SupportedTabletLayout: SupportedPhoneLayout | "toggleable" | "toggleable-mini"

Since tablets have more real-estate than phones, they also support two more types of navigation with a toggleable persistent navigation as well as a persistent navigation.

The toggleable navigation will not be visible until the AppBarNav component has been clicked in the main fixed header. This sort of navigation will be rendered inline with the rest of your content and will persist until the user hides this sheet by clicking the close button within this sheet.

The toggleable mini navigation is just an expansion of this by also allowing a persistent mini navigation that will be covered when the toggleable navigation becomes visible.

SupportedWideLayout

SupportedWideLayout: SupportedTabletLayout | "floating" | "clipped" | "full-height"

Finally, when there is a lot of real estate, you can have three different types of static navigation that will always be visible, can't be hidden, and are rendered inline with the rest of your content.

A floating navigation is a static sheet that will have a transparent background and no elevation applied so it is really inline with the rest of the content on your page. It will expand the entire viewport height except ensuring that the main fixed header does not overlap the top of it.

A clipped navigation is like the floating navigation except that it gains the main surface background color and adds some default elevation to help draw focus to itself.

Finally, a full-height navigation will cover the entire viewport height and shift the main fixed header so that the left edge of the header stops at the right edge of the navigation.

Variables

Const DEFAULT_DESKTOP_LAYOUT

DEFAULT_DESKTOP_LAYOUT: SupportedWideLayout = "full-height"

Const DEFAULT_LANDSCAPE_TABLET_LAYOUT

DEFAULT_LANDSCAPE_TABLET_LAYOUT: SupportedTabletLayout = "toggleable"

Const DEFAULT_LAYOUT_MAIN_CLASSNAMES

DEFAULT_LAYOUT_MAIN_CLASSNAMES: Readonly<CSSTransitionClassNames> = ...

Const DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES

DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES: Readonly<CSSTransitionClassNames> = ...

Const DEFAULT_PHONE_LAYOUT

DEFAULT_PHONE_LAYOUT: SupportedPhoneLayout = "temporary"

Const DEFAULT_TABLET_LAYOUT

DEFAULT_TABLET_LAYOUT: SupportedTabletLayout = "toggleable"

Const DEFFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES

DEFFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES: Readonly<Readonly<CSSTransitionClassNamesObject>> = DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES
deprecated

@since 5.1.3 use DEFAULT_LAYOUT_NAV_TOGGLE_CLASSNAMES instead

Const LayoutAppBar

LayoutAppBar: ForwardRefExoticComponent<LayoutAppBarProps & RefAttributes<HTMLDivElement>> = ...

This is the default implementation for an AppBar within the Layout that will conditionally render the default LayoutNavToggle button and AppBarTitle depending on specific props that were provided.

Const LayoutAppBarTitle

LayoutAppBarTitle: ForwardRefExoticComponent<AppBarTitleProps & RefAttributes<HTMLDivElement>> = ...

An extremely simple wrapper for the AppBarTitle that will automatically apply an id and apply the correct margin for full-height layouts.

Const LayoutCloseNavigationButton

LayoutCloseNavigationButton: ForwardRefExoticComponent<LayoutCloseNavigationButtonProps & RefAttributes<HTMLButtonElement>> = ...

The LayoutCloseNavigationButton is used to close the navigation panel for toggleable layouts.

Const LayoutMain

LayoutMain: ForwardRefExoticComponent<LayoutMainProps & RefAttributes<HTMLDivElement>> = ...

This is the <main> element for your app that has some built in styles to be able to update based on the current layout types.

Const LayoutNavToggle

LayoutNavToggle: ForwardRefExoticComponent<LayoutNavToggleProps & RefAttributes<HTMLButtonElement>> = ...

This is the default implementation for the navigation toggle button within the Layout component and should normally be the first child for the LayoutAppBar. In addition, this component will automatically update itself to provide an accessible aria-label for screen readers and change to a toggle button for toggleable layouts.

Const LayoutNavigation

LayoutNavigation: ForwardRefExoticComponent<LayoutNavigationProps<LayoutNavigationItem> & RefAttributes<HTMLDivElement>> = ...

The container for the main navigation within the Layout that renders differently depending on the current layout type.

Const LayoutNavigationHeader

LayoutNavigationHeader: ForwardRefExoticComponent<LayoutNavigationHeaderProps & RefAttributes<HTMLDivElement>> = ...

The default implementation for the AppBar within the LayoutNavigation that allows for rendering a title along with the LayoutCloseNavigationButton.

Const LayoutTree

LayoutTree: ForwardRefExoticComponent<LayoutTreeProps<LayoutNavigationItem> & RefAttributes<HTMLUListElement>> = ...

Renders the navigation tree for the Layout component that adds some reasonable defaults to work with navigation items.

Functions

Configuration

Layout

  • The layout to use for your app. There are 9 different types of layouts supported out of the box that work for a decent amount of apps out of the box.

    Note: You will need to ensure that the base Configuration component is a parent of this Layout component to work since it relies on the AppSizeContext for automatically updating the layout based on media queries.

    Parameters

    Returns ReactElement

LayoutChildren

  • The only purpose of this component is to render the children and different parts of the Layout depending on the current layout that is active. Since the Layout component defines the provider itself, this has to be a child component to get the resolved layout type.

    remarks

    @since 2.7.0

    internal

    Parameters

    Returns ReactElement

LayoutProvider

  • Determines the current layout based on the LayoutConfiguration and hooks into the AppSizeListener to update on resize. This also initializes the LayLayoutContext so that a custom layout implementation can be used along with the useLayoutConfig() hook and the multiple Layout components.

    Parameters

    Returns ReactElement

defaultMiniNavigationItemRenderer

  • defaultMiniNavigationItemRenderer(providedProps: ProvidedTreeItemProps, item: LayoutNavigationItem & { visibleIndex: number }, treeProps: ProvidedTreeProps): null | ReactElement<any, string | JSXElementConstructor<any>>

  • This is the default mini navigation item renderer provided by the layout package that has some reasonable defaults for creating a navigation tree.

    This renderer behaves a bit differently than the defaultNavigationItemRenderer since it will only render the tree item if:

    • the item is at the root -- parentId === null
    • the item is a divider at the root
    • the item is not a subheader -- there isn't enough space
    • the item does not have any child items -- not enough space to show nesting
    • the item has a leftAddon -- the mini variant only renders icons

    This rendered TreeItem will only display the leftAddon as the children but will also render the tree item's label in the SrOnly component so an accessible label still exists for the icon TreeItem.

    see

    TreeItemRenderer

    see

    defaultNavigationItemRenderer

    Parameters

    • providedProps: ProvidedTreeItemProps
    • item: LayoutNavigationItem & { visibleIndex: number }
    • treeProps: ProvidedTreeProps

    Returns null | ReactElement<any, string | JSXElementConstructor<any>>

defaultNavigationItemRenderer

  • defaultNavigationItemRenderer(providedProps: ProvidedTreeItemProps, item: LayoutNavigationItem & { visibleIndex: number }, treeProps: ProvidedTreeProps): null | ReactElement<any, string | JSXElementConstructor<any>>

  • This is the default navigation item renderer provided by the layout package that has some reasonable defaults for creating a navigation tree. This is just an extension of the base defaultTreeItemRenderer from the @react-md/tree package that adds in some support for also rendering dividers and subheader elements.

    Parameters

    • providedProps: ProvidedTreeItemProps
    • item: LayoutNavigationItem & { visibleIndex: number }
    • treeProps: ProvidedTreeProps

    Returns null | ReactElement<any, string | JSXElementConstructor<any>>

getLayoutType

isFullHeightLayout

isMiniLayout

  • Checks if the current layout is either "temporary-mini" or "toggleable-mini".

    remarks

    @since 2.7.0

    Parameters

    Returns boolean

    true if the current layout is the mini variant.

isPersistentLayout

isTemporaryLayout

isToggleableLayout

useLayoutConfig

useLayoutNavigation

  • This is a pretty reasonable default implementation for having a navigation tree within the Layout component. The way it'll work is that the current route will be the only selected item within the tree. When the pathname changes, the selectedIds will be updated to only be the current pathname once again.

    This means that you can use whatever routing library or history provider that ensures that your layout re-renders on a path change.

    see

    LayoutNavigationTree for description of the navItems

    Type parameters

    Parameters

    • navItems: LayoutNavigationTree<T>

      All the navigation items within your layout. This is used for determining which parent tree items should be expanded when the route changes so the current route won't be hidden from view. This sort of flow happens if you have a link outside of the navigation tree.

    • pathname: string

      The current pathname

    • linkComponent: ElementType<any> = Link

      The link component to use within the navigation tree for any item that has a to or href attribute. This defaults to the Link from @react-md/link but should be changed to whatever link component you need if using a routing library like react-router.

    Returns LayoutNavigationState<T>

    the required Tree selection and expansion state and handlers that should be passed to the Layout component.

Generated using TypeDoc