Skip to content

Commit fc5426e

Browse files
chetoncheton
committed
example: dropdown in dropdown
1 parent d9b667f commit fc5426e

File tree

3 files changed

+106
-3
lines changed

3 files changed

+106
-3
lines changed

‎examples/DropdownButton.jsx

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,38 @@ export default () => (
1010
<div className={styles.sectionGroup}>
1111
<div style={{ display: 'inline-block', marginRight: 20 }}>
1212
<h5>General</h5>
13-
<Dropdown>
14-
<Dropdown.Toggle btnSize="lg" btnStyle="flat">
13+
<Dropdown
14+
onSelect={(eventKey, event) => {
15+
}}
16+
>
17+
<Dropdown.Toggle
18+
btnSize="lg"
19+
btnStyle="flat"
20+
>
1521
Large
1622
</Dropdown.Toggle>
1723
<Dropdown.Menu>
18-
<MenuItem eventKey="1">Action</MenuItem>
24+
<MenuItem eventKey="1">
25+
<Dropdown
26+
onClick={event => {
27+
event.stopPropagation();
28+
}}
29+
onSelect={(eventKey, event) => {
30+
}}
31+
>
32+
<Dropdown.Toggle>
33+
...
34+
</Dropdown.Toggle>
35+
<Dropdown.Menu>
36+
<MenuItem eventKey="1.1">
37+
Another Action
38+
</MenuItem>
39+
<MenuItem eventKey="1.2">
40+
Another Action
41+
</MenuItem>
42+
</Dropdown.Menu>
43+
</Dropdown>
44+
</MenuItem>
1945
<MenuItem eventKey="2">Another Action</MenuItem>
2046
<MenuItem eventKey="3">Something else here</MenuItem>
2147
</Dropdown.Menu>

‎examples/DropdownInDropdown.jsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import Section from './Section';
3+
import Dropdown, { MenuItem } from '../src';
4+
import styles from './index.styl';
5+
6+
export default () => (
7+
<Section className="row-md-5 row-xl-5">
8+
<div className={styles.sectionGroup}>
9+
<h3>Dropdown In Dropdown</h3>
10+
<Dropdown>
11+
<Dropdown.Toggle>
12+
Select an option
13+
</Dropdown.Toggle>
14+
<Dropdown.Menu style={{ minWidth: 150 }}>
15+
<MenuItem eventKey="1" className="clearfix">
16+
Menu item one
17+
<Dropdown
18+
style={{ float: 'right' }}
19+
onClick={event => {
20+
event.stopPropagation();
21+
}}
22+
>
23+
<Dropdown.Toggle
24+
noCaret
25+
btnStyle="flat"
26+
btnSize="sm"
27+
compact
28+
style={{
29+
padding: 0,
30+
minWidth: 24
31+
}}
32+
>
33+
<i className="fa fa-fw fa-ellipsis-h" />
34+
</Dropdown.Toggle>
35+
<Dropdown.Menu>
36+
<MenuItem header>Action</MenuItem>
37+
<MenuItem>Rename</MenuItem>
38+
<MenuItem>Delete</MenuItem>
39+
</Dropdown.Menu>
40+
</Dropdown>
41+
</MenuItem>
42+
<MenuItem eventKey="2" className="clearfix">
43+
Menu item two
44+
<Dropdown
45+
style={{ float: 'right' }}
46+
onClick={event => {
47+
event.stopPropagation();
48+
}}
49+
>
50+
<Dropdown.Toggle
51+
noCaret
52+
btnStyle="flat"
53+
btnSize="sm"
54+
compact
55+
style={{
56+
padding: 0,
57+
minWidth: 24
58+
}}
59+
>
60+
<i className="fa fa-fw fa-ellipsis-h" />
61+
</Dropdown.Toggle>
62+
<Dropdown.Menu>
63+
<MenuItem header>Action</MenuItem>
64+
<MenuItem>Rename</MenuItem>
65+
<MenuItem>Delete</MenuItem>
66+
</Dropdown.Menu>
67+
</Dropdown>
68+
</MenuItem>
69+
</Dropdown.Menu>
70+
</Dropdown>
71+
</div>
72+
</Section>
73+
);

‎examples/index.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
66
import Nav from './Nav';
77
import DropdownButton from './DropdownButton';
88
import DropdownMenu from './DropdownMenu';
9+
import DropdownInDropdown from './DropdownInDropdown';
910
import DropdownMenuWrapper from './DropdownMenuWrapper';
1011
import AutoOpen from './AutoOpen';
1112
import Disabled from './Disabled';
@@ -35,6 +36,9 @@ class App extends React.Component {
3536
<div className="col-md-12 col-lg-6 col-xs-4">
3637
<DropdownMenu />
3738
</div>
39+
<div className="col-md-12 col-lg-6 col-xs-4">
40+
<DropdownInDropdown />
41+
</div>
3842
<div className="col-md-12 col-lg-6 col-xs-4">
3943
<DropdownMenuWrapper />
4044
</div>

0 commit comments

Comments
 (0)