Skip to content
Permalink
Browse files

feat(bee-radio): 全键盘操作

  • Loading branch information...
liushaozhen committed Nov 22, 2018
1 parent ccc2c18 commit ecd2930b355c23fdf31c14d6024c21d4b54ec817
Showing with 2,685 additions and 646 deletions.
  1. +2 −2 README.md
  2. +46 −11 build/Radio.css
  3. +9 −10 demo/demolist/Demo1.js
  4. +12 −16 demo/demolist/Demo2.js
  5. +16 −16 demo/demolist/Demo3.js
  6. +41 −0 demo/demolist/Demo4.js
  7. +1 −1 demo/index.js
  8. +83 −9 dist/demo.css
  9. +1 −1 dist/demo.css.map
  10. +2,414 −558 dist/demo.js
  11. +1 −1 dist/demo.js.map
  12. +2 −2 docs/api.md
  13. +1 −1 package.json
  14. +56 −18 src/Radio.scss
@@ -69,7 +69,7 @@ import "./node_modules/build/bee-radio.css"

|参数|说明|类型|默认值|
|---|----|---|------|
|color|one of: `primary` `success` `info` `error` `warning` `dark`|string|''|
|color|one of: `primary` `success` `info` `danger` `warning` `dark`|string|''|
|disabled|是否可用|bool|false|
| style | 添加style | object| {} |
|className|传入列的classname|String |-|
@@ -78,7 +78,7 @@ import "./node_modules/build/bee-radio.css"

|参数|说明|类型|默认值|
|:---|:----|:---|:------|
|color|one of: `primary` `success` `info` `error` `warning` `dark`|string|-|
|color|one of: `primary` `success` `info` `danger` `warning` `dark`|string|-|
|size|one of: `lg` `sm`|string|-|
|disabled|是否可用|bool|false|

@@ -65,7 +65,17 @@
color: #108ee9;
position: relative; }
.u-radio-group .u-radio-button input {
display: none; }
position: absolute;
left: 2px;
z-index: 3;
cursor: pointer;
opacity: 0;
top: 7px;
bottom: 0;
right: 0;
box-sizing: border-box;
padding: 0;
width: 100%; }
.u-radio-group .u-radio-button.is-checked .u-radio-button-label {
color: #108ee9; }
.u-radio-group .u-radio-button:hover, .u-radio-group .u-radio-button:focus, .u-radio-group .u-radio-button.focus, .u-radio-group .u-radio-button:active, .u-radio-group .u-radio-button.active, .u-radio-group .u-radio-button.is-checked {
@@ -78,14 +88,24 @@
margin-left: -1px; }

.u-radio {
position: relative;
line-height: 22px; }
.u-radio.disabled .u-radio-label {
cursor: not-allowed;
opacity: 0.5;
color: rgba(0, 0, 0, 0.25); }
.u-radio input[type='radio'] {
display: none;
cursor: pointer; }
position: absolute;
z-index: 3;
cursor: pointer;
opacity: 0;
top: 1px;
box-sizing: border-box;
padding: 0;
width: 100%;
height: 100%; }
.u-radio input[type='radio']:focus + .u-radio-label:before {
border-color: #1e88e5; }
.u-radio.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px #108ee9;
-webkit-box-shadow: inset 0 0 0 10px #108ee9;
@@ -145,6 +165,9 @@
.u-radio.u-radio-success .u-radio-label {
color: rgb(76,175,80); }

.u-radio.u-radio-success input[type='radio']:focus + .u-radio-label:before {
border-color: rgb(76,175,80); }

.u-radio.u-radio-warning.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(255,152,0);
-webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0);
@@ -154,6 +177,9 @@
.u-radio.u-radio-warning .u-radio-label {
color: rgb(255,152,0); }

.u-radio.u-radio-warning input[type='radio']:focus + .u-radio-label:before {
border-color: rgb(255,152,0); }

.u-radio.u-radio-danger.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(244,67,54);
-webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54);
@@ -163,14 +189,8 @@
.u-radio.u-radio-danger .u-radio-label {
color: rgb(244,67,54); }

.u-radio.u-radio-dark.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
-webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
box-shadow: inset 0 0 0 10px rgb(97,97,97);
border-color: rgb(97,97,97); }

.u-radio.u-radio-dark .u-radio-label {
color: rgb(97,97,97); }
.u-radio.u-radio-danger input[type='radio']:focus + .u-radio-label:before {
border-color: rgb(244,67,54); }

.u-radio.u-radio-info.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(0,188,212);
@@ -180,3 +200,18 @@

.u-radio.u-radio-info .u-radio-label {
color: rgb(0,188,212); }

.u-radio.u-radio-info input[type='radio']:focus + .u-radio-label:before {
border-color: rgb(0,188,212); }

.u-radio.u-radio-dark.is-checked .u-radio-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
-webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
box-shadow: inset 0 0 0 10px rgb(97,97,97);
border-color: rgb(97,97,97); }

.u-radio.u-radio-dark .u-radio-label {
color: rgb(97,97,97); }

.u-radio.u-radio-dark input[type='radio']:focus + .u-radio-label:before {
border-color: rgb(97,97,97); }
@@ -1,6 +1,6 @@
/**
* @title Radio
* @description `colors`参数控制背景色
* @description 基本用法
*/

import React, { Component } from 'react'
@@ -12,7 +12,7 @@ class Demo1 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'apple'
selectedValue: 'ig'
};
}
handleChange(value) {
@@ -21,16 +21,15 @@ class Demo1 extends Component{
render() {
return (
<Radio.RadioGroup
name="fruit"
name="lol"
selectedValue={this.state.selectedValue}
onChange={this.handleChange.bind(this)}>

<Radio value="apple" >apple</Radio>

<Radio value="orange" >Orange</Radio>

<Radio disabled value="watermelon" >Watermelon</Radio>

<Radio value="ig" >IG</Radio>
<Radio value="edg" >EDG</Radio>
<Radio value="rng" >RNG</Radio>
<Radio value="we" >WE</Radio>
<Radio value="skt" >SKT</Radio>
<Radio value="ssg" >SSG</Radio>
</Radio.RadioGroup>
)
}
@@ -1,42 +1,38 @@
/**
* @title 竖方向Radio
* @description 可以通过style来设置radio样式
* @title 不同颜色的radio
* @description `colors`参数控制背景色
*/

import React, { Component } from 'react'
import Radio from '../../src'



class demo2 extends Component{
class Demo2 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'apple'
selectedValue: 'ig'
};
}
handleChange(value) {
this.setState({selectedValue: value});
}
render() {
const radioStyle = {
display: 'block'
};
return (
<Radio.RadioGroup
name="fruit"
name="color"
selectedValue={this.state.selectedValue}
onChange={this.handleChange.bind(this)}>

<Radio style={radioStyle} value="apple" >apple</Radio>

<Radio style={radioStyle} value="orange" >Orange</Radio>

<Radio style={radioStyle} disabled value="watermelon" >Watermelon</Radio>

<Radio colors="primary" value="ig" >IG</Radio>
<Radio colors="success" value="edg" >EDG</Radio>
<Radio colors="info" value="rng" >RNG</Radio>
<Radio colors="warning" value="we" >WE</Radio>
<Radio colors="danger" value="skt" >SKT</Radio>
<Radio colors="dark" value="ssg" >SSG</Radio>
</Radio.RadioGroup>
)
}
};

export default demo2;
export default Demo2;
@@ -1,41 +1,41 @@
/**
* @title RadioButton
* @description `colors`参数控制背景色
* @title 竖方向Radio
* @description 可以通过style来设置radio样式
*/

import React, { Component } from 'react'
import Radio from '../../src'

const RadioGroup = Radio.RadioGroup;

class demo3 extends Component{

class Demo3 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'banana'
selectedValue: 'ig'
};
}
handleChange(value) {
this.setState({selectedValue: value});
}
render() {
const radioStyle = {
display: 'block'
};
return (
<Radio.RadioGroup
name="fruit"
name="team"
selectedValue={this.state.selectedValue}
onChange={this.handleChange.bind(this)}>

<Radio.RadioButton value="apple">apple</Radio.RadioButton>

<Radio.RadioButton value="banana">banana</Radio.RadioButton>

<Radio.RadioButton value="orange">orange</Radio.RadioButton>

<Radio style={radioStyle} value="ig" >IG</Radio>
<Radio style={radioStyle} value="edg" >EDG</Radio>
<Radio style={radioStyle} value="rng" >RNG</Radio>
<Radio style={radioStyle} value="we" >WE</Radio>
<Radio style={radioStyle} value="skt" >SKT</Radio>
<Radio style={radioStyle} value="ssg" >SSG</Radio>
</Radio.RadioGroup>


)
}
};

export default demo3;
export default Demo3;
@@ -0,0 +1,41 @@
/**
* @title RadioButton
* @description
*/

import React, { Component } from 'react'
import Radio from '../../src'

const RadioGroup = Radio.RadioGroup;

class Demo4 extends Component{
constructor(props) {
super(props);
this.state = {
selectedValue: 'banana'
};
}
handleChange(value) {
this.setState({selectedValue: value});
}
render() {
return (
<Radio.RadioGroup
name="fruit"
selectedValue={this.state.selectedValue}
onChange={this.handleChange.bind(this)}>

<Radio.RadioButton value="apple">apple</Radio.RadioButton>

<Radio.RadioButton value="banana">banana</Radio.RadioButton>

<Radio.RadioButton value="orange">orange</Radio.RadioButton>

</Radio.RadioGroup>


)
}
};

export default Demo4;
@@ -11,7 +11,7 @@ const CARET = <i className="uf uf-arrow-down"></i>;
const CARETUP = <i className="uf uf-arrow-up"></i>;


var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio value=\"apple\" >apple</Radio>\n\n <Radio value=\"orange\" >Orange</Radio>\n\n <Radio disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo2 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'apple'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio style={radioStyle} value=\"apple\" >apple</Radio>\n\n <Radio style={radioStyle} value=\"orange\" >Orange</Radio>\n\n <Radio style={radioStyle} disabled value=\"watermelon\" >Watermelon</Radio>\n\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo3 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"}]
var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var Demo4 = require("./demolist/Demo4");var DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description 基本用法 \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo1 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"lol\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio value=\"ig\" >IG</Radio>\n <Radio value=\"edg\" >EDG</Radio>\n <Radio value=\"rng\" >RNG</Radio>\n <Radio value=\"we\" >WE</Radio>\n <Radio value=\"skt\" >SKT</Radio>\n <Radio value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 基本用法 "},{"example":<Demo2 />,"title":" 不同颜色的radio","code":"/**\n * @title 不同颜色的radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo2 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"color\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio colors=\"primary\" value=\"ig\" >IG</Radio>\n <Radio colors=\"success\" value=\"edg\" >EDG</Radio>\n <Radio colors=\"info\" value=\"rng\" >RNG</Radio>\n <Radio colors=\"warning\" value=\"we\" >WE</Radio>\n <Radio colors=\"danger\" value=\"skt\" >SKT</Radio>\n <Radio colors=\"dark\" value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" `colors`参数控制背景色"},{"example":<Demo3 />,"title":" 竖方向Radio","code":"/**\n * @title 竖方向Radio\n * @description 可以通过style来设置radio样式\n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\n\n\nclass Demo3 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'ig'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n const radioStyle = {\n display: 'block'\n };\n return (\n <Radio.RadioGroup\n name=\"team\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n <Radio style={radioStyle} value=\"ig\" >IG</Radio>\n <Radio style={radioStyle} value=\"edg\" >EDG</Radio>\n <Radio style={radioStyle} value=\"rng\" >RNG</Radio>\n <Radio style={radioStyle} value=\"we\" >WE</Radio>\n <Radio style={radioStyle} value=\"skt\" >SKT</Radio>\n <Radio style={radioStyle} value=\"ssg\" >SSG</Radio>\n </Radio.RadioGroup>\n )\n }\n};\n\n","desc":" 可以通过style来设置radio样式"},{"example":<Demo4 />,"title":" RadioButton","code":"/**\n * @title RadioButton\n * @description \n */\n\nimport React, { Component } from 'react'\nimport { Radio } from 'tinper-bee';\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo4 extends Component{\n constructor(props) {\n \tsuper(props);\n \tthis.state = {\n \tselectedValue: 'banana'\n };\n }\n handleChange(value) {\n this.setState({selectedValue: value});\n }\n render() {\n return (\n <Radio.RadioGroup\n name=\"fruit\"\n selectedValue={this.state.selectedValue}\n onChange={this.handleChange.bind(this)}>\n\n <Radio.RadioButton value=\"apple\">apple</Radio.RadioButton>\n\n <Radio.RadioButton value=\"banana\">banana</Radio.RadioButton>\n\n <Radio.RadioButton value=\"orange\">orange</Radio.RadioButton>\n\n </Radio.RadioGroup>\n \n\n )\n }\n};\n\n","desc":" "}]


class Demo extends Component {

0 comments on commit ecd2930

Please sign in to comment.
You can’t perform that action at this time.