Skip to content

Commit

Permalink
example: dropdown in dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Jan 11, 2018
1 parent d9b667f commit fc5426e
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 3 deletions.
32 changes: 29 additions & 3 deletions examples/DropdownButton.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,38 @@ export default () => (
<div className={styles.sectionGroup}>
<div style={{ display: 'inline-block', marginRight: 20 }}>
<h5>General</h5>
<Dropdown>
<Dropdown.Toggle btnSize="lg" btnStyle="flat">
<Dropdown
onSelect={(eventKey, event) => {
}}
>
<Dropdown.Toggle
btnSize="lg"
btnStyle="flat"
>
Large
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="1">
<Dropdown
onClick={event => {
event.stopPropagation();
}}
onSelect={(eventKey, event) => {
}}
>
<Dropdown.Toggle>
...
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem eventKey="1.1">
Another Action
</MenuItem>
<MenuItem eventKey="1.2">
Another Action
</MenuItem>
</Dropdown.Menu>
</Dropdown>
</MenuItem>
<MenuItem eventKey="2">Another Action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
</Dropdown.Menu>
Expand Down
73 changes: 73 additions & 0 deletions examples/DropdownInDropdown.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react';
import Section from './Section';
import Dropdown, { MenuItem } from '../src';
import styles from './index.styl';

export default () => (
<Section className="row-md-5 row-xl-5">
<div className={styles.sectionGroup}>
<h3>Dropdown In Dropdown</h3>
<Dropdown>
<Dropdown.Toggle>
Select an option
</Dropdown.Toggle>
<Dropdown.Menu style={{ minWidth: 150 }}>
<MenuItem eventKey="1" className="clearfix">
Menu item one
<Dropdown
style={{ float: 'right' }}
onClick={event => {
event.stopPropagation();
}}
>
<Dropdown.Toggle
noCaret
btnStyle="flat"
btnSize="sm"
compact
style={{
padding: 0,
minWidth: 24
}}
>
<i className="fa fa-fw fa-ellipsis-h" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem header>Action</MenuItem>
<MenuItem>Rename</MenuItem>
<MenuItem>Delete</MenuItem>
</Dropdown.Menu>
</Dropdown>
</MenuItem>
<MenuItem eventKey="2" className="clearfix">
Menu item two
<Dropdown
style={{ float: 'right' }}
onClick={event => {
event.stopPropagation();
}}
>
<Dropdown.Toggle
noCaret
btnStyle="flat"
btnSize="sm"
compact
style={{
padding: 0,
minWidth: 24
}}
>
<i className="fa fa-fw fa-ellipsis-h" />
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItem header>Action</MenuItem>
<MenuItem>Rename</MenuItem>
<MenuItem>Delete</MenuItem>
</Dropdown.Menu>
</Dropdown>
</MenuItem>
</Dropdown.Menu>
</Dropdown>
</div>
</Section>
);
4 changes: 4 additions & 0 deletions examples/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
import Nav from './Nav';
import DropdownButton from './DropdownButton';
import DropdownMenu from './DropdownMenu';
import DropdownInDropdown from './DropdownInDropdown';
import DropdownMenuWrapper from './DropdownMenuWrapper';
import AutoOpen from './AutoOpen';
import Disabled from './Disabled';
Expand Down Expand Up @@ -35,6 +36,9 @@ class App extends React.Component {
<div className="col-md-12 col-lg-6 col-xs-4">
<DropdownMenu />
</div>
<div className="col-md-12 col-lg-6 col-xs-4">
<DropdownInDropdown />
</div>
<div className="col-md-12 col-lg-6 col-xs-4">
<DropdownMenuWrapper />
</div>
Expand Down

0 comments on commit fc5426e

Please sign in to comment.