collapsible-split-layout
A React component to display a splitted layout were one of the sides can be collapsed/expanded without affecting the whole layout.
Demo
You can access the storybook for these components here.
Props
There are three components.
One (CollapsibleSplitLayout) for displaying on demand one of the following components and two components (CollapsibleSplitLayoutHorizontal and CollapsibleSplitLayoutVertical) used by the first component.
Props accepted by CollapsibleSplitLayout/CollapsibleSplitLayoutHorizontal/CollapsibleSplitLayoutVertical
Name | Type | Required | Default | Description |
---|
childCollapsible | React.ReactNode | yes | - | The collapsible component |
childView | React.ReactNode | yes | - | The non-collapsible component |
gap | number | no | 0 | The gap between componetns in MUI units (1 unit = 8px) |
isReversed | boolean | no | false | The collapsible component is for false on the left |
maxCollapsibleSize | number | no | - | The max size of collapsible component |
minCollapsibleSize | number | no | - | The min size of collapsible component |
Only for CollapsibleSplitLayout
Name | Type | Required | Default | Description |
---|
isVertical | boolean | no | false | It is used the CollapsibleSplitLayoutHorizontal |
Versions
CollapsibleSplitLayout uses | React |
---|
1.0.x | 18.0.0 |
About versioning schema used for CollapsibleSplitLayout
- Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of CollapsibleSplitLayout or CollapsibleSplitLayoutRaw
- Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it
- Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of CollapsibleSplitLayout or CollapsibleSplitLayoutRaw
Example
Displaying a horizontal layout (collapsible on left):
import * as React from 'react';
import { CollapsibleSplitLayoutHorizontal } from 'collapsible-split-layout';
class App extends React.Component {
render() {
return (
<div className="App">
<CollapsibleSplitLayoutHorizontal
childCollapsible={<FlexibleBox />}
childView={<FixView />}
/>
</div>
);
}
}
export default App;
Displaying a reversed vertical layout (collapsible down):
import * as React from 'react';
import { CollapsibleSplitLayoutRaw } from 'collapsible-split-layout';
class App extends React.Component {
render() {
return (
<div className="App">
<CollapsibleSplitLayout
isVertical
childCollapsible={<FlexibleBox />}
childView={<FixView />}
isReversed
/>
</div>
);
}
}
export default App;
Changelog
1.0.0
- collapsible-split-layout is made publicly available
1.0.1