)
yarn add @dorbus/flexboardnpm install @dorbus/flexboardTo use Flexboard in your application first import FlexboardProvider, FlexboardFrame and Flexboard.
To use Left Sidebar FlexboardFrame component must be used below the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to left.
import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
<FlexboardProvider>
<Flexboard
direction={Position.left}
draggable={true}
width={400}
minWidth={200}
maxWidth={600}
flexboardStyle={{ backgroundColor: "#f2f3f4" }}
resizerStyle={{ backgroundColor: "pink" }}
resizerType={ResizerType.gutterlane}
>
<div>Flexboard Content</div>
</Flexboard>
<FlexboardFrame>
<div>Frame Content</div>
</FlexboardFrame>
</FlexboardProvider>To use Right Sidebar FlexboardFrame component must be used above the Flexboard component inside FlexboardProvider and the direction prop in Flexboard component should be set to right.
import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
<FlexboardProvider>
<FlexboardFrame>
<div>Frame Content</div>
</FlexboardFrame>
<Flexboard
direction={Position.right}
draggable={true}
width={400}
minWidth={200}
maxWidth={600}
flexboardStyle={{ backgroundColor: "#f2f3f4" }}
resizerStyle={{ backgroundColor: "pink" }}
resizerType={ResizerType.gutterlane}
>
<div>Flexboard Content</div>
</Flexboard>
</FlexboardProvider>To use Left-Right Sidebar FlexboardFrame component must be used in between the Flexboard left and right components inside FlexboardProvider.
import { Flexboard, FlexboardProvider, FlexboardFrame, ResizerType, Position } from '@dorbus/flexboard';
<FlexboardProvider>
<Flexboard
direction={Position.left}
draggable={true}
width={400}
minWidth={200}
maxWidth={600}
flexboardStyle={{ backgroundColor: "#f2f3f4" }}
resizerStyle={{ backgroundColor: "pink" }}
resizerType={ResizerType.gutterlane}
>
<div>Left-Sidebar</div>
</Flexboard>
<FlexboardFrame>
<div>Frame Content</div>
</FlexboardFrame>
<Flexboard
direction={Position.right}
draggable={true}
width={400}
minWidth={200}
maxWidth={600}
flexboardStyle={{ backgroundColor: "#f2f3f4" }}
resizerStyle={{ backgroundColor: "pink" }}
resizerType={ResizerType.gutterlane}
>
<div>Right-Sidebar</div>
</Flexboard>
</FlexboardProvider>| Component | Prop | Type | Description | Default |
|---|---|---|---|---|
| Flexboard | direction | Position |
Flexboard position | left |
| draggable | boolean |
Flexboard is resizable or not | false |
|
| width | number |
Initial width of flexboard | 200px |
|
| minWidth | number |
Minimum width of draggable flexboard | 150 |
|
| maxWidth | number |
Maximum width of draggable flexboard | 300 |
|
| flexboardStyle | CSS |
Pass custom sidebar styles | - | |
| resizerStyle | CSS |
Pass custom resizer styles | - | |
| resizerType | ResizerTypes |
Choose a resizer type:
|
line |
Code and documentation Copyright (c) ISC © 2022 Dorbus.
