vertical-section
v1.10.0arrow_drop_downv1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
38
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
N/A
Represents a section within a VerticalNavigation.
1 contributor
Like
Install vertical-section as a package?
Copied
npm i @bit/nexxtway.react-rainbow.vertical-section
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example 
modifieddraft
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout

chevron_left
chevron_right
VerticalSection
import React from 'react';
import { VerticalNavigation, VerticalSection, VerticalItem } from 'react-rainbow-components';
const containerStyles = {
width: '220px',
borderBottomLeftRadius: '0.875rem',
borderRight: '1px solid #e3e5ed',
};
class SimpleVerticalNavigation extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedItem: 'item 1',
};
this.handleOnSelect = this.handleOnSelect.bind(this);
}
handleOnSelect(e, selectedItem) {
return this.setState({ selectedItem });
}
render() {
return (
<VerticalNavigation
selectedItem={this.state.selectedItem}
onSelect={this.handleOnSelect}
>
<VerticalSection label="REPORTS">
<VerticalItem name="item-1" label="Recent" />
<VerticalItem name="item-2" label="Created by Me" />
</VerticalSection>
<VerticalSection label="COMPONENTS">
<VerticalItem
name="item-3"
label="VerticalSection"
href="/#/Components/VerticalSection"
/>
<VerticalItem
name="item-4"
label="VerticalNavigation"
href="/#/Components/VerticalNavigation"
/>
</VerticalSection>
<VerticalSection label="Folders">
<VerticalItem name="item-5" label="Created by Me" />
<VerticalItem name="item-6" label="Shared with Me" />
</VerticalSection>
</VerticalNavigation>
);
}
}
<div>
<GlobalHeader src="images/user/user3.jpg" />
<div
className="rainbow-background-color_white rainbow-p-vertical_small"
style={containerStyles}
>
<SimpleVerticalNavigation />
</div>
</div>
Properties
Name | Type | Default value | Description |
---|---|---|---|
label | string | node | null | The heading text for this section. |
className | string | undefined | A CSS class for the outer element, in addition to the component’s base classes. |
style | object | undefined | An object with custom style applied for the outer element. |
children | node | null |