Components Needed To Create A Layout.
We try to add as many layouts as possible keeping in mind the need of the developers, but still there might be times when you need to create a custom layout and still use all the features of RapidAdminReact®. Creating a custom layout is fairly simple and the following components need to be kept in mind while creating a custom layout.
Component API’s and their use
- RapidSidebarMini - Renders the mini collapsable sidebar in your layout.
- RapidHeader - Renders the main header to your layout
- RapidHeaderLinksLeft - Add components to the left side of the header
- RapidHeaderLinksRight - Add components to the right side of the header
- RapidMainContent - Nest your main content inside this
Sample layout using the above components
The above components can be nested in the given heirarchy to create a new layout. You can remove any of the above component if it is not needed in the layout and customise your layout the way you want to.
import React , { Fragment } from 'react';
import {
RapidHeader ,
RapidHeaderLinksLeft ,
RapidHeaderLinksRight ,
RapidMainContent ,
RapidSidebarMini ,
} from "../../@rapidAdmin/components";
export default function MyLayout ( props )
{
return (
<Fragment>
<RapidSidebarMini>
<RapidHeader>
<RapidHeaderLinksLeft>
{/* Insert The Links Visible On The left Side Of The Header As Child Elements */ }
</RapidHeaderLinksLeft>
<RapidHeaderLinksRight>
{/* Insert The Links Visible On The Right Side Of The Header As Child Elements */ }
</RapidHeaderLinksRight>
</RapidHeader>
</RapidSidebarMini>
<RapidMainContent>
{ props.children }
</RapidMainContent>
</Fragment>
);
}
Using your layout in your pages
Once you have defined a layout now you can simply use the layout inside your pages and nest components inside the new layout component that you just created.
import React , { Fragment } from 'react';
import MyLayout from '../layouts';
export default function MyPage() {
return (
<MyLayout>
// Nest your components inside your new layout
</MyLayout>
)
}
Navigating between pages using the <RapidRouter />
If you are using <RapidRouter /> to declare your page routes (which you should) you don’t need to do anything else to make this new layout work. It’s already working for you out of the box. You can further read about Routing with RapidAdminReact®
