Layout

Box

The Box component is a container that can be used to wrap other components.

<Box />

Props

Prop	Description
heading	undefined | string Heading of the component.

Layout

The Layout component is a component that builds main layout of the admin.

<Layout
  sidebarHeader="Project name"
  navigation={
    <Menu>
      <Menu.Item title="Articles" to="articleList"/>
    </Menu>
  }
/>

Props

Prop	Description
className	string A class name that is applied to the component.
children	Renders content of the component.
sidebarHeader	ReactNode The header of the sidebar usually containing the title of the page.
sidebarFooter	ReactNode The footer of the sidebar usually containing the logout button or user info.
switchers	ReactNode The place for switchers in the sidebar. It's right below sidebar header.
navigation	ReactNode The place for navigation in the sidebar.
scheme	'system' | 'light' | 'light-above' | 'light-below' | 'dark' | 'dark-above' | 'dark-below' The definition of the color scheme of the layout. Contember supports light and dark color schemes. The default is 'system' which means that the color scheme is defined by the operating system.
theme	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the layout. You can read more about the color themes in theming part.
themeContent	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the layout. Content part of the layout can have different color theme. You can read more about the color themes in theming part.
themeControls	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the layout. Controls of the layout can have different color theme. You can read more about the color themes in theming part.
pageScheme	'system' | 'light' | 'light-above' | 'light-below' | 'dark' | 'dark-above' | 'dark-below' The definition of the color scheme for page. Contember supports light and dark color schemes. The default is 'system' which means that the color scheme is defined by the operating system.
pageTheme	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the page. You can read more about the color themes in theming part.
pageThemeContent	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the content part of the page. You can read more about the color themes in theming part.
pageThemeControls	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the controls. You can read more about the color themes in theming part.
titleScheme	'system' | 'light' | 'light-above' | 'light-below' | 'dark' | 'dark-above' | 'dark-below' The definition of the color scheme for the title. Contember supports light and dark color schemes. The default is 'system' which means that the color scheme is defined by the operating system.
titleTheme	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the title. You can read more about the color schemes in theming part.
titleThemeContent	Intent Color theme of the title content. You can read more about the color schemes in theming part.
titleThemeControls	'default' | 'primary' | 'secondary' | 'tertiary' | 'positive' | 'success' | 'warn' | 'danger' Color theme of the title controls. You can read more about the color schemes in theming part.

Section

The Section component defines a section on page. It automatically generates sub-menu for quick navigation on the page.

<Section heading="Section name" />

Props

Prop	Description
children	Renders content of the component.

Stack

The Stack components allows you to stack any content vertically or horizontally.

<Stack direction="horizontal" />

Props

Prop	Description
children	Renders content of the component.
direction	'vertical' | 'horizontal' | 'vertical-reverse' | 'horizontal-reverse' It defines the direction of the elements.