Skip to content

Commit 54082e0

Browse files
pietervpieterv
committed
Docs for DropdownButton and SplitButton
Content and examples based on http://getbootstrap.com/components/#btn-dropdowns
1 parent f660bbb commit 54082e0

14 files changed

Lines changed: 721 additions & 483 deletions

‎docs/bundle.js‎

Lines changed: 559 additions & 474 deletions
Large diffs are not rendered by default.

‎docs/components.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/css.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/examples/ButtonGroupJustified.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ var buttonGroupInstance = (
44
<ButtonGroup justified>
55
<Button href="#">Left</Button>
66
<Button href="#">Middle</Button>
7-
<DropdownButton href="#" title="Dropdown">
7+
<DropdownButton title="Dropdown">
88
<MenuItem key="1">Dropdown link</MenuItem>
99
<MenuItem key="2">Dropdown link</MenuItem>
1010
</DropdownButton>

‎docs/examples/DropdownButtonBasic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/** @jsx React.DOM */
2+
3+
var BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link'];
4+
5+
function renderDropdownButton(title) {
6+
return (
7+
<DropdownButton bsStyle={title.toLowerCase()} title={title}>
8+
<MenuItem key="1">Action</MenuItem>
9+
<MenuItem key="2">Another action</MenuItem>
10+
<MenuItem key="3">Something else here</MenuItem>
11+
<MenuItem divider />
12+
<MenuItem key="4">Separated link</MenuItem>
13+
</DropdownButton>
14+
);
15+
}
16+
17+
var buttonsInstance = (
18+
<div>{BUTTONS.map(renderDropdownButton)}</div>
19+
);
20+
21+
React.renderComponent(buttonsInstance, mountNode);

‎docs/examples/DropdownButtonsizes.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/** @jsx React.DOM */
2+
3+
var buttonsInstance = (
4+
<div>
5+
<ButtonToolbar>
6+
<DropdownButton bsSize="large" title="Large button">
7+
<MenuItem key="1">Action</MenuItem>
8+
<MenuItem key="2">Another action</MenuItem>
9+
<MenuItem key="3">Something else here</MenuItem>
10+
<MenuItem divider />
11+
<MenuItem key="4">Separated link</MenuItem>
12+
</DropdownButton>
13+
</ButtonToolbar>
14+
15+
<ButtonToolbar>
16+
<DropdownButton bsSize="small" title="Small button">
17+
<MenuItem key="1">Action</MenuItem>
18+
<MenuItem key="2">Another action</MenuItem>
19+
<MenuItem key="3">Something else here</MenuItem>
20+
<MenuItem divider />
21+
<MenuItem key="4">Separated link</MenuItem>
22+
</DropdownButton>
23+
</ButtonToolbar>
24+
25+
<ButtonToolbar>
26+
<DropdownButton bsSize="xsmall" title="Extra small button">
27+
<MenuItem key="1">Action</MenuItem>
28+
<MenuItem key="2">Another action</MenuItem>
29+
<MenuItem key="3">Something else here</MenuItem>
30+
<MenuItem divider />
31+
<MenuItem key="4">Separated link</MenuItem>
32+
</DropdownButton>
33+
</ButtonToolbar>
34+
</div>
35+
);
36+
37+
React.renderComponent(buttonsInstance, mountNode);

‎docs/examples/SplitButtonBasic.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/** @jsx React.DOM */
2+
3+
var BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger'];
4+
5+
function renderDropdownButton(title) {
6+
return (
7+
<SplitButton bsStyle={title.toLowerCase()} title={title}>
8+
<MenuItem key="1">Action</MenuItem>
9+
<MenuItem key="2">Another action</MenuItem>
10+
<MenuItem key="3">Something else here</MenuItem>
11+
<MenuItem divider />
12+
<MenuItem key="4">Separated link</MenuItem>
13+
</SplitButton>
14+
);
15+
}
16+
17+
var buttonsInstance = (
18+
<div>{BUTTONS.map(renderDropdownButton)}</div>
19+
);
20+
21+
React.renderComponent(buttonsInstance, mountNode);

‎docs/examples/SplitButtonDropup.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/** @jsx React.DOM */
2+
3+
var buttonsInstance = (
4+
<div>
5+
<ButtonToolbar>
6+
<SplitButton title="Dropup" dropup>
7+
<MenuItem key="1">Action</MenuItem>
8+
<MenuItem key="2">Another action</MenuItem>
9+
<MenuItem key="3">Something else here</MenuItem>
10+
<MenuItem divider />
11+
<MenuItem key="4">Separated link</MenuItem>
12+
</SplitButton>
13+
</ButtonToolbar>
14+
15+
<ButtonToolbar>
16+
<SplitButton bsStyle="primary" title="Right dropup" dropup right>
17+
<MenuItem key="1">Action</MenuItem>
18+
<MenuItem key="2">Another action</MenuItem>
19+
<MenuItem key="3">Something else here</MenuItem>
20+
<MenuItem divider />
21+
<MenuItem key="4">Separated link</MenuItem>
22+
</SplitButton>
23+
</ButtonToolbar>
24+
</div>
25+
);
26+
27+
React.renderComponent(buttonsInstance, mountNode);

‎docs/examples/SplitButtonRight.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/** @jsx React.DOM */
2+
3+
var buttonsInstance = (
4+
<SplitButton title="Dropup right" right>
5+
<MenuItem key="1">Action</MenuItem>
6+
<MenuItem key="2">Another action</MenuItem>
7+
<MenuItem key="3">Something else here</MenuItem>
8+
<MenuItem divider />
9+
<MenuItem key="4">Separated link</MenuItem>
10+
</SplitButton>
11+
);
12+
13+
React.renderComponent(buttonsInstance, mountNode);

‎docs/getting-started.html‎

Lines changed: 4 additions & 4 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)