import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';
class Example extends React.Component {
render() {
return (
<Dropdown color="primary" label="Dropdown">
<DropdownItem link="#/link1">Option 1</DropdownItem>
<DropdownItem>Option 2</DropdownItem>
<DropdownItem>Option 3</DropdownItem>
<DropdownItem>Option 4</DropdownItem>
</Dropdown>
);
}
}
ReactDOM.render(<Example />, document.getElementById('example'));
The dropdown component handles onClick and onSelect events.
import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';
class Example extends React.Component {
render() {
return (
<Dropdown
color="primary"
label="Dropdown"
onClick={function() {console.log('toggle clicked')}}
onSelect={function(val) {console.log(val);}}
>
<DropdownItem value="option-1">Option 1</DropdownItem>
<DropdownItem value="option-2">Option 2</DropdownItem>
<DropdownItem value="option-3">Option 3</DropdownItem>
<DropdownItem value="option-4">Option 4</DropdownItem>
</Dropdown>
);
}
}
ReactDOM.render(<Example />, document.getElementById('example'));
To set the placement and alignment of the dropdown menu use the placement (down|up|right|left) and alignment (left|right|bottom) attributes.
import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';
class Example extends React.Component {
render() {
let dropdownItems = [
<DropdownItem key="1">Option 1</DropdownItem>,
<DropdownItem key="2">Option 2</DropdownItem>
];
return (
<div>
<div>
<Dropdown color="primary" label="Dropdown">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropdown (right aligned)" alignment="right">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropup" placement="up">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropup (right aligned)" placement="up" alignment="right">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropright" placement="right">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropright (bottom aligned)" placement="right" alignment="bottom">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropleft" placement="left">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown color="primary" label="Dropleft (bottom aligned)" placement="left" alignment="bottom">
{dropdownItems}
</Dropdown>
</div>
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById('example'));
To modify the dropdown toggle button use the color (default|primary|danger|accent), size (default|small|large) and variant (default|flat|raised|fab) attributes.
import React from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'muicss/lib/react/dropdown';
import DropdownItem from 'muicss/lib/react/dropdown-item';
class Example extends React.Component {
render() {
let dropdownItems = [
<DropdownItem key="1">Option 1</DropdownItem>,
<DropdownItem key="2">Option 2</DropdownItem>
];
return (
<div>
<div>
<Dropdown label="Dropdown" color="default">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" color="primary">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" color="danger">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" color="accent">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" size="default">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" size="small">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" size="large">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" variant="default">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" variant="flat">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="Dropdown" variant="raised">
{dropdownItems}
</Dropdown>
</div>
<div>
<Dropdown label="D" variant="fab">
{dropdownItems}
</Dropdown>
</div>
</div>
);
}
}
ReactDOM.render(<Example />, document.getElementById('example'));