Page

React

Usage

Structure

  • Page
    • Page.Main
      • Page.Header
        • Page.Breadcrumbs
        • Page.Banner
        • Page.Title
        • Page.Tabs
      • Page.Body
      • Page.Footer
    • Page.Aside
      • aside content - e.g. Panel
      • To control visibility, open prop can be used
      • If needed to imperatively open/close aside block, PageContext#aside.open or PageContext#aside.close can be used

These primary elements do not require any configuration and should be used to build a common skeleton of a page.

Other helpers, such as Page.Grid, Page.Row and Page.Column are thin wrappers over Grid components and share the same API.

Props

Page.Aside

NameTypeRequiredDefaultDescription
as
string | ComponentType<any>
false
children
ReactNode
false
className
string
false

Additional classNames

open
boolean
false
description

If the aside block should be open

since

10.19.0

style
CSSProperties
false

Additional CSS styles

NameTypeRequiredDefaultDescription
as
string | ComponentType<any>
false
children
ReactNode
false
className
string
false

Additional classNames

style
CSSProperties
false

Additional CSS styles

transparent
boolean
false
description

If the header should have no background.

since

10.19.0

Demo