Layout

Layout components are components in React whose primary concern is helping us to arrange other components that we create on the page.

Author

• @author Hariharan [email protected]

Link

Story Book Link Layout

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_layout

Import component

import { Layout } from '@licuido-ui/ui_layout';

Usage

<Layout headerComponent={<Header />} bodyComponent={<BodyContent />} footerComponent={<Footer />} />

Image

Sample Code

<Layout 
   headerComponent={<Header />} 
   bodyComponent={<BodyContent />} 
   footerComponent={<Footer />} 
/>

Props

| Name | Description | Default | Control | | ------------------- | -------------------- | ----------------- | --------------------- | | id | string | string | string | | containerStyle | SxProps<{}> | { } | containerStyle : {} | | headerStyle | SxProps<{}> | { } | headerStyle : {} | | bodyStyle | SxProps<{}> | { } | bodyStyle : {} | | footerStyle | SxProps<{}> | { } | footerStyle : {} | | headerComponent | ReactNode | <></> | ReactNode | | bodyComponent | ReactNode | <></> | ReactNode | | footerComponent | ReactNode | <></> | ReactNode | | className | string | - | Set string | | sx | SxProps<Theme> | - | Set object |