Layout

Layout UI Component

Demo

Installation

npm i @synerise/ds-layout
or
yarn add @synerise/ds-layout
import Layout from '@synerise/ds-layout'
<Layout
header={<HeaderComponent />}
left={<LeftSidebarComponent>}
right={RightSidebarComponent}
leftOpened=true
rightOpened=true
className={layoutClass}
>
<Content />
<Layout />

API

PropertyDescriptionTypeDefault
headerSet top header content pageReact.ReactNode
subheaderSet subheader content pageReact.ReactNode
leftSet left content pageReact.ReactNode
rightSet right content pageReact.ReactNode
childrenThe layout elements passed to the parentReact.ReactNode
classNameLayout's classNamestring
stylesCustom layout stylesLayoutStyles

LayoutStyles

PropertyDescriptionTypeDefault
leftStyles of left componentReact.CSSProperties-
leftInnerStyles of left inner componentReact.CSSProperties-
mainStyles of main componentReact.CSSProperties-
mainInnerStyles of main inner componentReact.CSSProperties-
rightStyles of right componentReact.CSSProperties-
rightInnerStyles of right inner componentReact.CSSProperties-