Skip to content

Latest commit

 

History

History
247 lines (195 loc) · 8.32 KB

README.md

File metadata and controls

247 lines (195 loc) · 8.32 KB
icon

GitHub GitHub release (latest by date including pre-releases GitHub top language GitHub Repo forks GitHub Repo stars GitHub package.json dependency version (prod) GitHub Repo stars Github Repo Sponsors

React component library for re-sizable sidebars

Flexboard-Skeleton

icon
icon

Installation

yarn

yarn add @dorbus/flexboard

npm

npm install @dorbus/flexboard

Usage

To use Flexboard in your application first import FlexboardProvider, FlexboardFrame and Flexboard.

Left Sidebar

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>

Right Sidebar

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>

Left-Right Sidebar

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>

API

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
  • shadowline
  • lane
  • gutterlane
line

Project Created & Maintained By

Divyanshu Shekhar

GitHub followers

Aniket Pathak

GitHub followers

Stargazers

Stargazers repo roster for @dorbus/flexboard

Forkers

Forkers repo roster for @dorbus/flexboard

Copyright & License

Code and documentation Copyright (c) ISC © 2022 Dorbus.