2.0.17 • Published 3 months ago
@zendeskgarden/container-splitter v2.0.17
@zendeskgarden/container-splitter
This package includes containers relating to Splitter in the Garden Design System.
Installation
npm install @zendeskgarden/container-splitter
Usage
This container implements the window splitter design pattern and can be used to build a splitter component. Check out storybook for live examples.
useSplitter
The useSplitter
hook manages positioning and required
accessibility attributes for the window splitting separator.
import {
useSplitter,
SplitterType,
SplitterOrientation,
SplitterPosition
} from '@zendeskgarden/container-splitter';
const Splitter = () => {
const { getSeparatorProps, getPrimaryPaneProps, valueNow } = useSplitter({
label: 'primary-pane',
type: SplitterType.VARIABLE,
orientation: SplitterOrientation.VERTICAL,
min: 50,
max: 100,
position: SplitterPosition.TRAILS,
environment: window
});
const separatorProps = getSeparatorProps();
const primaryPaneProps = getPrimaryPaneProps();
return (
<div style={{ display: 'flex' }}>
<div {...primaryPaneProps} style={{ flex: `0 0 ${valueNow}px` }}>
<p>Primary Pane</p>
</div>
<div style={{ flex: '0 0 5px' }} {...separatorProps} />
<div style={{ flex: '1 1 auto' }}>
<p>Secondary Pane</p>
</div>
</div>
);
};
SplitterContainer
SplitterContainer
is a render-prop wrapper for the useSplitter
hook.
import {
SplitterContainer,
SplitterType,
SplitterOrientation,
SplitterPosition
} from '@zendeskgarden/container-splitter';
<SplitterContainer
label="primary-pane"
type={SplitterType.VARIABLE}
orientation={SplitterOrientation.VERTICAL}
min={50}
max={100}
position={SplitterPosition.TRAILS}
environment={window}
>
{({ getSeparatorProps, getPrimaryPaneProps, valueNow }) => {
const separatorProps = getSeparatorProps();
const primaryPaneProps = getPrimaryPaneProps();
return (
<div id="container" style={{ display: 'flex' }}>
<div {...primaryPaneProps} style={{ flex: `0 0 ${valueNow}px` }}>
<p>Primary Pane</p>
</div>
<div style={{ flex: '0 0 5px' }} {...separatorProps} />
<div style={{ flex: '1 1 auto' }}>
<p>Secondary Pane</p>
</div>
</div>
);
}}
</SplitterContainer>;
2.0.16
3 months ago
2.0.17
3 months ago
2.0.15
3 months ago
2.0.13
7 months ago
2.0.14
7 months ago
2.0.11
8 months ago
2.0.12
8 months ago
2.0.9
10 months ago
2.0.10
9 months ago
2.0.8
11 months ago
2.0.7
1 year ago
2.0.6
1 year ago
1.0.0
2 years ago
2.0.3
1 year ago
2.0.2
2 years ago
2.0.4
1 year ago
0.2.3
2 years ago
0.2.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago