Skip to content
Permalink
Browse files

fix(Radio.js): 修改radio的props传递样式的位置,并增加竖方向示例

  • Loading branch information...
HuYuee committed Jan 2, 2018
1 parent 61dd2bc commit e3d1a3d63df865eb4ca174ce2a1ca33c1bcba91c
Showing with 655 additions and 210 deletions.
  1. +12 −11 demo/demolist/Demo2.js
  2. +41 −0 demo/demolist/Demo3.js
  3. +1 −1 demo/index.js
  4. +2 −2 dist/demo.css
  5. +1 −1 dist/demo.css.map
  6. +593 −191 dist/demo.js
  7. +1 −1 dist/demo.js.map
  8. +2 −1 src/Radio.js
  9. +2 −2 src/Radio.scss
@@ -1,41 +1,42 @@
/**
* @title RadioButton
* @description `colors`参数控制背景色
* @title 竖方向Radio
* @description 可以通过style来设置radio样式
*/

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

const RadioGroup = Radio.RadioGroup;

class Demo2 extends Component{

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

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

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

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

</Radio.RadioGroup>


)
}
};

export default Demo2;
export default demo2;
@@ -0,0 +1,41 @@
/**
* @title RadioButton
* @description `colors`参数控制背景色
*/

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

const RadioGroup = Radio.RadioGroup;

class demo3 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 demo3;
@@ -12,7 +12,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 DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\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":" RadioButton","code":"/**\n * @title RadioButton\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\n\nconst RadioGroup = Radio.RadioGroup;\n\nclass Demo2 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 DemoArray = [{"example":<Demo1 />,"title":" Radio","code":"/**\n * @title Radio\n * @description `colors`参数控制背景色\n */\n\nimport React, { Component } from 'react'\nimport Radio from 'bee-radio'\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 'bee-radio'\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 'bee-radio'\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`参数控制背景色"}]


class Demo extends Component {
@@ -6250,7 +6250,7 @@ input.u-button[type="submit"] {
border-color: #108ee9; }
.u-radio.is-checked .u-radio-label:after {
position: absolute;
top: 9px;
top: 8px;
border-radius: 4px;
height: 8px;
width: 8px;
@@ -6274,7 +6274,7 @@ input.u-button[type="submit"] {
width: 18px;
height: 18px;
left: 0;
bottom: 0;
bottom: 1px;
text-align: center;
position: absolute; }
.u-radio .u-radio-label:after {

Large diffs are not rendered by default.

0 comments on commit e3d1a3d

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