react-bootify
Version:
react-bootify
128 lines (98 loc) • 3.57 kB
Markdown
### Usage
```js static
import {Dropdown} from 'react-bootify';
/* or */
import Dropdown from 'react-bootify/components/dropdown';
```
### A simple down
```js
import {Form, Button} from 'react-bootify';
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.text = '';
}
setText(text) {
this.setState({text:text});
}
render() {
return (
<Form padding={{x:2}}>
<Form.Group row>
<Dropdown placement='bottom-start'>
<Dropdown.Target>
<Button outline color='primary'>
Primary
</Button>
</Dropdown.Target>
<Dropdown.Menu >
<Dropdown.Item onClick={this.setText.bind(this, 'Gone home.')}>
Go home
</Dropdown.Item>
<Dropdown.Item onClick={this.setText.bind(this, 'Went back.')}>
Go back
</Dropdown.Item>
<Dropdown.Separator/>
<Dropdown.Item onClick={this.setText.bind(this, '')}>
Never mind
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Label float='right' text='muted' margin={{left:2}} inline>
{this.state.text}
</Form.Label>
</Form.Group>
</Form>
);
}
}
<Sample/>
```
```js
import {Tag, Form, Button, Icon} from 'react-bootify';
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.text = '';
}
setText(text) {
this.setState({text:text});
}
render() {
return (
<Form padding={{x:2}}>
<Form.Group row>
<Dropdown placement='bottom-start'>
<Dropdown.Target>
<Button outline color='primary'>
<Tag display='inline'>
Primary
</Tag>
<Icon src={require('bootstrap-icons/icons/chevron-down.svg')} margin={{left:2}} width='1em' height='1em' />
</Button>
</Dropdown.Target>
<Dropdown.Menu >
<Dropdown.Item onClick={this.setText.bind(this, 'Gone home.')}>
Go home
</Dropdown.Item>
<Dropdown.Item onClick={this.setText.bind(this, 'Went back.')}>
Go back
</Dropdown.Item>
<Dropdown.Separator/>
<Dropdown.Item onClick={this.setText.bind(this, '')}>
Never mind
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form.Label float='right' text='muted' margin={{left:2}} inline>
{this.state.text}
</Form.Label>
</Form.Group>
</Form>
);
}
}
<Sample/>
```