mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
Radio Input - implimenting UI component and styling
This commit is contained in:
parent
f1917acae1
commit
d1e92b416e
46
ui/src/components/radio/index.js
Normal file
46
ui/src/components/radio/index.js
Normal file
@ -0,0 +1,46 @@
|
||||
const classNames = require('classnames');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Radio = ({
|
||||
name,
|
||||
value,
|
||||
label,
|
||||
checked,
|
||||
disabled = false,
|
||||
className,
|
||||
id,
|
||||
onChange,
|
||||
style
|
||||
}) => {
|
||||
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.radio
|
||||
);
|
||||
|
||||
return (
|
||||
<label className={cn}>
|
||||
<input
|
||||
name={name}
|
||||
value={value}
|
||||
disabled={disabled}
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
type="radio"
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
Radio.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
name: React.PropTypes.string,
|
||||
value: React.PropTypes.string,
|
||||
label: React.PropTypes.string,
|
||||
checked: React.PropTypes.bool,
|
||||
onChange: React.PropTypes.func
|
||||
};
|
||||
|
||||
module.exports = Radio;
|
42
ui/src/components/radio/readme.md
Normal file
42
ui/src/components/radio/readme.md
Normal file
@ -0,0 +1,42 @@
|
||||
# `<Radio>`
|
||||
|
||||
## 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 Radio = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Container>
|
||||
<Row>
|
||||
<Column>
|
||||
<Radio name='gender' value='female' label='Female' checked={false}/>
|
||||
<Radio name='gender' value='male' label='Male' checked={true}/>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Radio = require('ui/radio');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Radio name='gender' value='female' label='Female' />
|
||||
<Radio name='gender' value='male' label='Male' checked/>
|
||||
);
|
||||
}
|
||||
```
|
48
ui/src/components/radio/style.css
Normal file
48
ui/src/components/radio/style.css
Normal file
@ -0,0 +1,48 @@
|
||||
:root {
|
||||
--radio-radius: 20px;
|
||||
}
|
||||
|
||||
.radio {
|
||||
cursor: pointer;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& span {
|
||||
margin-left: 30px;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
border : calc( var(--radio-radius) / 4 ) solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px #cfd1d1;
|
||||
display: inline-block;
|
||||
height: var(--radio-radius);
|
||||
left: -30px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: var(--radio-radius);
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="radio"] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
|
||||
&:checked {
|
||||
& ~ span:before {
|
||||
background: #D8D8D8;
|
||||
border : calc( var(--radio-radius) / 4 ) solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px #cfd1d1;
|
||||
height: var(--radio-radius);
|
||||
position: absolute;
|
||||
width: var(--radio-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -8,6 +8,7 @@ module.exports = {
|
||||
Base: require('./components/base/readme.md'),
|
||||
Container: require('./components/container/readme.md'),
|
||||
Row: require('./components/row/readme.md'),
|
||||
Radio: require('./components/radio/readme.md'),
|
||||
Column: require('./components/column/readme.md'),
|
||||
Button: require('./components/button/readme.md'),
|
||||
Toggle: require('./components/toggle/readme.md'),
|
||||
|
@ -8,4 +8,6 @@ module.exports = {
|
||||
Toggle: require('./components/toggle'),
|
||||
Tab: require('./components/tab'),
|
||||
Tabs: require('./components/tabs')
|
||||
Toggle: require('./components/toggle')
|
||||
Radio: require('./components/radio'),
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user