Create complex and nice Flexbox-based layouts, without even knowing what flexbox means.
yarn add nice-react-layoutThe aim of this project is to have a reduced set of components to create flexbox-based layouts abstracting the knowledge needed to understand how flexbox works.
- Easy to learn: Just combine layouts and panels.
- Create collapsible sidebars with ease.
- Automagically colorize panels with random colors to speed-up prototyping.
- Resizable panels. Just add separators to your layouts.
Creating a simple layout is as easy as this:
<HorizontalLayout mockup>
<Panel />
<Panel />
</HorizontalLayout>It renders an horizontal layout with two panels of the same size (they have proportion=1 by default). Thanks to the 'mockup' prop it paints every panel with a random color, easing the layout prototyping process.
In both horizontal and vertical layouts add the prop 'proportion' with the proportional part it takes from the available space. This example creates a typical sidebar + content layout:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Panel proportion={4} />
</HorizontalLayout>Do you want to add a separator between both panels? Use the Separator component:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Separator />
<Panel proportion={4} />
</HorizontalLayout>You can nest layouts. Let's add a vertical layout, with its own Separator, inside the right panel:
<HorizontalLayout mockup>
<Panel proportion={1} />
<Separator />
<Panel proportion={4}>
<VerticalLayout mockup>
<Panel />
<Separator />
<Panel />
</VerticalLayout>
</Panel>
</HorizontalLayout>For a complete example with every feature, see the Example.js file.
It creates an horizontal layout. This is shorthand component for:
<Layout orientation="horizontal" />It creates vertical layout layout. This is a shorthand component for:
<Layout orientation="vertical" />Creates a layout.
| Prop | Description |
|---|---|
| collapseSize | Collapsible panels size when collapsed |
| customCss | Custom layout CSS object |
| mockup | Render in mockup mode |
| orientation | 'vertical' or 'horizontal' |
| reverse | Render layout in reverse order |
Here is where your content goes. If you are familiar with flexbox, this is like a "flex item" with a flex value of 1 by default. If not, don't worry, you don't need to know that :)
| Prop | Description |
|---|---|
| centered | Center panel content |
| collapsible | The panel can be collapsed |
| collapsed | Is the panel collapsed? |
| collapseButtonClass | Adds a class to the collapse button |
| collapseButtonContent | A String or element |
| collapseButtonCollapsedContent | A String or element |
| collapseButtonStyle | Inject inline CSS to the collapse button |
| collapsePanel | Called when collapse button is clicked |
| collapseSwitch | Custom collapse element (renders button if not provided) |
| customCss | Custom panel CSS object (injects it as an inline style) |
| minHeight | Minimum panel height |
| minWidth | Minimum panel width |
| mockup | Render in mockup mode |
| orientation | 'vertical' or 'horizontal' |
| proportion | Proportion it uses from the available space (default = 1) |
| reverse | Render layout in reverse order |
| sidebar | Don't do much by it self. It is a requirement for sidebar props like 'collapsible' |
It separates panels and allows them to be resized. This is optional.
| Prop | Description |
|---|---|
| defaultDblClickPos | Position where the separator goes when double-clicked |
| disabled | Is disabled? |
| onSeparatorDoubleClick | Action called when the separator is double-clicked |
| onSeparatorMouseDown | Action called when the mouse is over the separator |
It renders a blank space. Useful when you need to leave spaces between panels.
| Prop | Description |
|---|---|
| size | Separator size in pixels |