initial toggle implementation

This commit is contained in:
Sérgio Ramos 2016-10-26 11:55:27 +01:00
parent db37669ac6
commit f6fdb635da
5 changed files with 121 additions and 2 deletions

View File

@ -0,0 +1,36 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Toggle = ({
off = false,
className,
style
}) => {
const tgl = classNames(
className,
styles.toggle,
off ? styles.off : styles.on,
);
const btn = classNames(
className,
styles.btn
);
return (
<div className={tgl} style={style}>
<div className={btn} />
<span className={styles.label}>
{off ? 'Off' : 'On'}
</span>
</div>
);
};
Toggle.propTypes = {
className: React.PropTypes.string,
style: React.PropTypes.object
};
module.exports = Toggle;

View File

@ -0,0 +1,29 @@
# `<Button>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Toggle = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Container>
<Row>
<Column>
<Toggle />
</Column>
<Column>
<Toggle off />
</Column>
</Row>
</Container>
</Base>
);
```

View File

@ -0,0 +1,52 @@
.toggle {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #464646;
border-radius: 4px;
width: 5rem;
height: 2.5rem;
& .btn,
& .label {
height: 2.188rem;
width: 2.188rem;
margin: 0.125rem;
}
& .label {
padding-top: 4px;
text-align: center;
}
& .btn {
background: #FFFFFF;
box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
border-radius: 3px;
}
&.on {
background: #38C647;
border: 1px solid #23AC32;
& .label {
float: right;
color: #FFFFFF;
}
& .btn {
float: left;
}
}
&.off {
background: #E6E6E6;
border: 1px solid #D8D8D8;
& .label {
float: left;
}
& .btn {
float: right;
}
}
}

View File

@ -9,7 +9,8 @@ module.exports = {
Container: require('./components/container/readme.md'), Container: require('./components/container/readme.md'),
Row: require('./components/row/readme.md'), Row: require('./components/row/readme.md'),
Column: require('./components/column/readme.md'), Column: require('./components/column/readme.md'),
Button: require('./components/button/readme.md') Button: require('./components/button/readme.md'),
Toggle: require('./components/toggle/readme.md')
}, },
FAQ: require('./faq.md') FAQ: require('./faq.md')
}; };

View File

@ -3,5 +3,6 @@ module.exports = {
Button: require('./components/button'), Button: require('./components/button'),
Column: require('./components/column'), Column: require('./components/column'),
Container: require('./components/container'), Container: require('./components/container'),
Row: require('./components/row') Row: require('./components/row'),
Toggle: require('./components/toggle')
}; };