DetailPage

Usage

Structure

DetailPage
- DetailPage.Main
  - DetailPage.Header
    - DetailPage.Breadcrumbs
      - Breadcrumbs
    - DetailPage.Banner
      - Banner
    - DetailPage.Title
      - Title or H1
    - DetailPage.Tabs
      - Tabs
  - DetailPage.Body
    - DetailPage.Title
    - DetailPage.Banner
    - DetailPage.Card
      - DetailPage.Banner
      - DetailPage.Section
        DetailPage.Section
      - DetailPage.Section
  - DetailPage.Footer
    - DetailPage.FooterNotation
    - DetailPage.FooterActions
- DetailPage.Aside

DetailPage

Name	Type	Required	Default	Description
children	ReactNode	false
className	string	false		Additional classNames
style	CSSProperties	false		Additional CSS styles
width	DetailPageWidth	false		description Width of the content since 10.19.0

DetailPage.Aside

Name	Type	Required	Default	Description
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

DetailPage.Header

Name	Type	Required	Default	Description
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

DetailPage.Section

Name	Type	Required	Default	Description
actions	ReactNode \| ((section: { open: boolean }) => ReactNode)	false		description Actions of Buttons and Dropdowns to render. If a function, the open state is provided as `open` key since 10.19.0
assets	ReactNode	false		description Title assets since 10.19.0
children	ReactNode	false
className	string	false		Additional classNames
expandId	string \| number	false		description Enable the expand and collapse accordion feature. Requires a unique ID across sections, unique within the provider (DetailPage.Card) and requires a heading on the section. Closed sections will not render its children. since 10.19.0
heading	string	false		description Heading text for the section since 10.19.0
initialIsOpen	boolean	false		description If expandable, start open or closed since 10.19.0
pills	ReactNode	false		description Title pills since 10.19.0
style	CSSProperties	false		Additional CSS styles
subtext	ReactNode	false		description Title subtext since 10.19.0

Base

Read

The DetailPage.Header will not be transparent.
Have a DetailPage.Title inside DetailPage.Header.

Edit

The edit view is used for both creating and updating an item.

Set transparent on DetailPage.Header.
Move the DetailPage.Title inside of DetailPage.Body.
Introduce a DetailPage.Footer next to the DetailPage.Body.
A Form.Form can wrap the DetailPage.Body and DetailPage.Footer.