Button Dropdown
import React from 'react';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret>
Button Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
);
}
}
Properties
ButtonDropdown.propTypes = {
disabled: PropTypes.bool,
direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
group: PropTypes.bool,
isOpen: PropTypes.bool,
tag: PropTypes.string,
toggle: PropTypes.func
};
DropdownToggle.propTypes = {
caret: PropTypes.bool,
color: PropTypes.string,
disabled: PropTypes.bool,
onClick: PropTypes.func,
'data-toggle': PropTypes.string,
'aria-haspopup': PropTypes.bool
};
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret color="primary">
Text
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<Button id="caret" color="primary">{this.props.text}</Button>
<DropdownToggle caret color="primary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
Sizing
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret size="lg">
Large Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret size="sm">
Small Button
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
Drop direction variations
<ButtonDropdown direction="up" isOpen={isOpen} toggle={toggle}>
<DropdownToggle caret>
Dropup
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
<DropdownToggle caret>
Dropleft
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
<DropdownToggle caret>
Dropright
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>