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={{content: <LeftSidebarComponent />, opened: true, onChange: () => {}}}

right={{content: <RightSidebarComponent />, opened: false, onChange: () => {}}}

className={layoutClass}

>

<Content />

<Layout />

API

Property	Description	Type	Default
header	Set top header content page	React.ReactNode
subheader	Set subheader content page	React.ReactNode
left	Configuration of left sidebar	SidebarProps
right	Configuration of right sidebar	SidebarProps
children	The layout elements passed to the parent	React.ReactNode
className	Layout's className	string
styles	Custom layout styles	LayoutStyles
leftOpened	Whether left sidebar is opened	boolean	false
rightOpened	Whether right sidebar is opened	boolean	false
leftOpenedWidth	Width of opened left sidebar	number	320
rightOpenedWidth	Width of opened right sidebar	number	320
renderLeftSidebarControls	Left sidebar visibility. Accepts function returning ReactNode.	boolean or function	false
renderRightSidebarControls	Right sidebar visibility. Accepts function returning ReactNode.	boolean or function	false
leftSidebarWithDnd	Set withDnd in left sidebar scrollbar	boolean	false
mainSidebarWithDnd	Set withDnd in main sidebar scrollbar	boolean	false
rightSidebarWithDnd	Set withDnd in right sidebar scrollbar	boolean	false
nativeScroll	Set main column to use native browser scroll	boolean	false
nativeScrollRef	ref to pass to scrollable element	Ref<HTMLDivElement>	-
fillViewport	sets layout to absolute with calc(100vh - viewportTopOffset) height	boolean	false
viewportTopOffset	top viewport offset (if fillViewport is true)	number	55

SidebarProps

Property	Description	Type	Default
opened	Wheter sidebar is opened	boolean	false
onChange	Callback fired when user clicks the sidebar button	(isOpened: boolean) => void	-
content	Content of sidebar	React.ReactNode	-
width	Width of opened sidebar	number	320

LayoutStyles

Property	Description	Type	Default
left	Styles of left component	React.CSSProperties	-
leftInner	Styles of left inner component	React.CSSProperties	-
main	Styles of main component	React.CSSProperties	-
mainInner	Styles of main inner component	React.CSSProperties	-
right	Styles of right component	React.CSSProperties	-
rightInner	Styles of right inner component	React.CSSProperties	-