Skip to content

Commit 3d48e8c

Browse files
eddywashereeddywashere
committed
feat(Dropdowns): add examples
1 parent 750aaf9 commit 3d48e8c

3 files changed

Lines changed: 57 additions & 1 deletion

File tree

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>React Bootstrap</title>
55
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
66
</head>
7-
<body>
7+
<body class="m-b-2">
88
<div id="app"></div>
99
<script src="/assets/example.min.js"></script>
1010
</body>

‎example/js/DropdownsExample.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
3+
import React from 'react';
4+
import { Button, Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'lib/index';
5+
6+
class DropdownsExample extends React.Component {
7+
render() {
8+
return (
9+
<div>
10+
<h3>Dropdown</h3>
11+
<hr/>
12+
<Dropdown className="m-b-1">
13+
<DropdownToggle caret>
14+
Ello
15+
</DropdownToggle>
16+
<DropdownMenu>
17+
<DropdownItem header>Header</DropdownItem>
18+
<DropdownItem disabled>Action</DropdownItem>
19+
<DropdownItem>Another Action</DropdownItem>
20+
<DropdownItem divider/>
21+
<DropdownItem>Another Action</DropdownItem>
22+
</DropdownMenu>
23+
</Dropdown>
24+
<Dropdown className="m-b-1">
25+
<DropdownToggle>
26+
<Button color="danger">Open</Button>
27+
</DropdownToggle>
28+
<DropdownMenu>
29+
<DropdownItem header>Header</DropdownItem>
30+
<DropdownItem disabled>Action</DropdownItem>
31+
<DropdownItem>Another Action</DropdownItem>
32+
<DropdownItem divider/>
33+
<DropdownItem>Another Action</DropdownItem>
34+
</DropdownMenu>
35+
</Dropdown>
36+
<Dropdown className="m-b-1 btn-group">
37+
<Button color="danger">Default</Button>
38+
<DropdownToggle caret>
39+
<Button color="danger"><span className="sr-only">Toggle Dropdown</span></Button>
40+
</DropdownToggle>
41+
<DropdownMenu>
42+
<DropdownItem header>Header</DropdownItem>
43+
<DropdownItem>Action</DropdownItem>
44+
<DropdownItem>Another Action</DropdownItem>
45+
<DropdownItem divider/>
46+
<DropdownItem>Another Action</DropdownItem>
47+
</DropdownMenu>
48+
</Dropdown>
49+
</div>
50+
);
51+
}
52+
}
53+
54+
export default DropdownsExample;

‎example/js/Layout.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import ButtonsExample from './ButtonsExample';
3+
import DropdownsExample from './DropdownsExample';
34

45
class Layout extends React.Component {
56
render() {
@@ -11,6 +12,7 @@ class Layout extends React.Component {
1112
<h1>React Bootstrap Components</h1>
1213
</div>
1314
<ButtonsExample/>
15+
<DropdownsExample/>
1416
</div>
1517
</div>
1618
</div>

0 commit comments

Comments
 (0)