Skip to content

Commit 8433acf

Browse files
chetoncheton
committed
Update examples and docs
1 parent fa73137 commit 8433acf

File tree

12 files changed

+1120
-429
lines changed

12 files changed

+1120
-429
lines changed

‎docs/bundle.js‎

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

‎docs/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<title>React Buttons</title>
77
<meta name="description" content="">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
910
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
1111
</head>
1212
<body>
1313
<div id="container"></div>
14-
<script type="text/javascript" src="bundle.js?f00b1425e533a4521524"></script></body>
14+
<script type="text/javascript" src="bundle.js?824f6a62c2d0390d077c"></script></body>
1515
</html>

‎examples/ButtonSizes.jsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,30 @@ export default () => {
66
<div>
77
<h4>Button Sizes</h4>
88
<div>
9-
<Button btnSize="large">Large</Button>
10-
<Button btnSize="lg" btnStyle="primary">Large</Button>
11-
<Button btnSize="lg" btnStyle="emphasis">Large</Button>
12-
<Button btnSize="lg" btnStyle="flat">Large</Button>
13-
<br /><br />
14-
<Button btnSize="medium">Medium</Button>
15-
<Button btnSize="md" btnStyle="primary">Medium</Button>
16-
<Button btnSize="md" btnStyle="emphasis">Medium</Button>
17-
<Button btnSize="md" btnStyle="flat">Medium</Button>
18-
<br /><br />
19-
<Button btnSize="small">Small</Button>
20-
<Button btnSize="sm" btnStyle="primary">Small</Button>
21-
<Button btnSize="sm" btnStyle="emphasis">Small</Button>
22-
<Button btnSize="sm" btnStyle="flat">Small</Button>
23-
<br /><br />
24-
<Button btnSize="extra-small">Extra Small</Button>
25-
<Button btnSize="xs" btnStyle="primary">Extra Small</Button>
26-
<Button btnSize="xs" btnStyle="emphasis">Extra Small</Button>
27-
<Button btnSize="xs" btnStyle="flat">Extra Small</Button>
9+
<p>
10+
<Button btnSize="large" style={{ width: 100 }}>Large</Button>
11+
<Button btnSize="lg" btnStyle="primary" style={{ width: 100 }}>Large</Button>
12+
<Button btnSize="lg" btnStyle="emphasis" style={{ width: 100 }}>Large</Button>
13+
<Button btnSize="lg" btnStyle="flat" style={{ width: 100 }}>Large</Button>
14+
</p>
15+
<p>
16+
<Button btnSize="medium" style={{ width: 100 }}>Medium</Button>
17+
<Button btnSize="md" btnStyle="primary" style={{ width: 100 }}>Medium</Button>
18+
<Button btnSize="md" btnStyle="emphasis" style={{ width: 100 }}>Medium</Button>
19+
<Button btnSize="md" btnStyle="flat" style={{ width: 100 }}>Medium</Button>
20+
</p>
21+
<p>
22+
<Button btnSize="small" style={{ width: 100 }}>Small</Button>
23+
<Button btnSize="sm" btnStyle="primary" style={{ width: 100 }}>Small</Button>
24+
<Button btnSize="sm" btnStyle="emphasis" style={{ width: 100 }}>Small</Button>
25+
<Button btnSize="sm" btnStyle="flat" style={{ width: 100 }}>Small</Button>
26+
</p>
27+
<p>
28+
<Button btnSize="extra-small" style={{ width: 100 }}>Extra Small</Button>
29+
<Button btnSize="xs" btnStyle="primary" style={{ width: 100 }}>Extra Small</Button>
30+
<Button btnSize="xs" btnStyle="emphasis" style={{ width: 100 }}>Extra Small</Button>
31+
<Button btnSize="xs" btnStyle="flat" style={{ width: 100 }}>Extra Small</Button>
32+
</p>
2833
</div>
2934
</div>
3035
);

‎examples/Nav.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import classNames from 'classnames';
2+
import React, { Component, PropTypes } from 'react';
3+
import { Button } from '../src';
4+
import styles from './Nav.styl';
5+
6+
export default class extends Component {
7+
static propTypes = {
8+
name: PropTypes.string,
9+
url: PropTypes.string
10+
};
11+
12+
state = {
13+
collapseIn: false
14+
};
15+
16+
render() {
17+
const { name, url } = this.props;
18+
19+
return (
20+
<nav
21+
className={classNames(styles.navbar, styles.navbarDefault)}
22+
style={{ borderRadius: 0 }}
23+
>
24+
<div className={styles.containerFluid}>
25+
<div className={styles.navbarHeader}>
26+
<button
27+
type="button"
28+
className={classNames(styles.navbarToggle, styles.collapsed)}
29+
onClick={() => {
30+
this.setState({ collapseIn: !this.state.collapseIn });
31+
}}
32+
>
33+
<span className={styles.srOnly}>Toggle navigation</span>
34+
<span className={styles.iconBar} />
35+
<span className={styles.iconBar} />
36+
<span className={styles.iconBar} />
37+
</button>
38+
<a href="#" className={styles.navbarBrand}>{name}</a>
39+
</div>
40+
<div
41+
className={classNames(
42+
styles.collapse,
43+
styles.navbarCollapse,
44+
{ [styles.in]: this.state.collapseIn }
45+
)}
46+
>
47+
<Button
48+
className={classNames(styles.navbarBtn, styles.navbarRight)}
49+
btnStyle="flat"
50+
onClick={() => {
51+
window.location = url;
52+
}}
53+
>
54+
<i className="fa fa-github" />
55+
GitHub
56+
</Button>
57+
</div>
58+
</div>
59+
</nav>
60+
);
61+
}
62+
}

0 commit comments

Comments
 (0)