vertical-section

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

8 months ago

SIZE

N/A

Represents a section within a VerticalNavigation.

React

vertical section

1 contributor

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

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

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`