组件演示

[{"title":"基本使用","id":"components-rate-demo-basic","tags":[],"filepath":"site/components/rate/demo/basic.md","directory":"components/rate/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/rate/demo/basic.md","filename":"basic","directory":"components/rate/demo","id":"components-rate-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n total: 5,\n value: 3\n };\n _this.scoreTips = ['不给力啊', '还成吧', '哎呦，不错哦', '嗯，很给力', '哇，超出期望啊'];\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onChange',\n value: function onChange(val) {\n console.log(val);\n this.setState({\n value: val\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'rate-demo-wrp' },\n React.createElement(_uxcore.Rate, { className: 'rate-demo', total: this.state.total, value: this.state.value, scoreTips: this.scoreTips, onChange: this.onChange.bind(this) })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-rate-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Rate } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n total: <span class=\"hljs-number\">5</span>,\n value: <span class=\"hljs-number\">3</span>,\n };\n <span class=\"hljs-keyword\">this</span>.scoreTips = [\n <span class=\"hljs-string\">'不给力啊'</span>,\n <span class=\"hljs-string\">'还成吧'</span>,\n <span class=\"hljs-string\">'哎呦，不错哦'</span>,\n <span class=\"hljs-string\">'嗯，很给力'</span>,\n <span class=\"hljs-string\">'哇，超出期望啊'</span>,\n ];\n }\n\n onChange(val) {\n <span class=\"hljs-built_in\">console</span>.log(val);\n <span class=\"hljs-keyword\">this</span>.setState({\n value: val,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo-wrp\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Rate</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo\"</span> <span class=\"hljs-attribute\">total</span>=<span class=\"hljs-value\">{this.state.total}</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">scoreTips</span>=<span class=\"hljs-value\">{this.scoreTips}</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.onChange.bind(this)}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-rate-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"Tip 显示在下方","id":"components-rate-demo-bottom","tags":[],"filepath":"site/components/rate/demo/bottom.md","directory":"components/rate/demo","filename":"bottom","meta":{"title":"Tip 显示在下方","description":"\n","order":"1","filepath":"site/components/rate/demo/bottom.md","filename":"bottom","directory":"components/rate/demo","id":"components-rate-demo-bottom","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n total: 5,\n value: 3\n };\n _this.scoreTips = ['不给力啊', '还成吧', '哎呦，不错哦', '嗯，很给力', '哇，超出期望啊'];\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onChange',\n value: function onChange(val) {\n console.log(val);\n this.setState({\n value: val\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'rate-demo-wrp' },\n React.createElement(_uxcore.Rate, { className: 'rate-demo', tipShow: 'always', total: this.state.total, value: this.state.value, scoreTips: this.scoreTips, onChange: this.onChange.bind(this) })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-rate-demo-bottom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Rate } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n total: <span class=\"hljs-number\">5</span>,\n value: <span class=\"hljs-number\">3</span>,\n };\n <span class=\"hljs-keyword\">this</span>.scoreTips = [\n <span class=\"hljs-string\">'不给力啊'</span>,\n <span class=\"hljs-string\">'还成吧'</span>,\n <span class=\"hljs-string\">'哎呦，不错哦'</span>,\n <span class=\"hljs-string\">'嗯，很给力'</span>,\n <span class=\"hljs-string\">'哇，超出期望啊'</span>,\n ];\n }\n\n onChange(val) {\n <span class=\"hljs-built_in\">console</span>.log(val);\n <span class=\"hljs-keyword\">this</span>.setState({\n value: val,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo-wrp\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Rate</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo\"</span> <span class=\"hljs-attribute\">tipShow</span>=<span class=\"hljs-value\">\"always\"</span> <span class=\"hljs-attribute\">total</span>=<span class=\"hljs-value\">{this.state.total}</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">scoreTips</span>=<span class=\"hljs-value\">{this.scoreTips}</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.onChange.bind(this)}</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-rate-demo-bottom'));</span></code></pre></div><style type=\"text/css\">.rate-demo-wrp {\n display: inline-block;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.rate-demo-wrp</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> inline-block</span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""},{"title":"大尺寸","id":"components-rate-demo-size","tags":[],"filepath":"site/components/rate/demo/size.md","directory":"components/rate/demo","filename":"size","meta":{"title":"大尺寸","description":"\n","order":"2","filepath":"site/components/rate/demo/size.md","filename":"size","directory":"components/rate/demo","id":"components-rate-demo-size","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n total: 5,\n value: 3\n };\n _this.scoreTips = ['不给力啊', '还成吧', '哎呦，不错哦', '嗯，很给力', '哇，超出期望啊'];\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onChange',\n value: function onChange(val) {\n console.log(val);\n this.setState({\n value: val\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'rate-demo-wrp' },\n React.createElement(_uxcore.Rate, { className: 'rate-demo', tipShow: 'always', total: this.state.total, value: this.state.value, scoreTips: this.scoreTips, onChange: this.onChange.bind(this), size: 'large' })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-rate-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Rate } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n total: <span class=\"hljs-number\">5</span>,\n value: <span class=\"hljs-number\">3</span>,\n };\n <span class=\"hljs-keyword\">this</span>.scoreTips = [\n <span class=\"hljs-string\">'不给力啊'</span>,\n <span class=\"hljs-string\">'还成吧'</span>,\n <span class=\"hljs-string\">'哎呦，不错哦'</span>,\n <span class=\"hljs-string\">'嗯，很给力'</span>,\n <span class=\"hljs-string\">'哇，超出期望啊'</span>,\n ];\n }\n\n onChange(val) {\n <span class=\"hljs-built_in\">console</span>.log(val);\n <span class=\"hljs-keyword\">this</span>.setState({\n value: val,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo-wrp\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Rate</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo\"</span> <span class=\"hljs-attribute\">tipShow</span>=<span class=\"hljs-value\">\"always\"</span> <span class=\"hljs-attribute\">total</span>=<span class=\"hljs-value\">{this.state.total}</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">scoreTips</span>=<span class=\"hljs-value\">{this.scoreTips}</span> <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.onChange.bind(this)}</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-rate-demo-size'));</span></code></pre></div><style type=\"text/css\">.rate-demo-wrp {\n display: inline-block;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.rate-demo-wrp</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> inline-block</span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""},{"title":"情感化评价","id":"components-rate-demo-emotion","tags":[],"filepath":"site/components/rate/demo/emotion.md","directory":"components/rate/demo","filename":"emotion","meta":{"title":"情感化评价","description":"\n","order":"3","filepath":"site/components/rate/demo/emotion.md","filename":"emotion","directory":"components/rate/demo","id":"components-rate-demo-emotion","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n total: 5,\n value: 3\n };\n _this.scoreTips = ['哇，超出期望啊', '不给力啊'];\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onChange',\n value: function onChange(val) {\n console.log(val);\n this.setState({\n value: val\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'rate-demo-wrp' },\n React.createElement(_uxcore.Rate, {\n className: 'rate-demo',\n total: 2,\n size: 'large',\n value: this.state.value,\n scoreTips: this.scoreTips,\n onChange: this.onChange.bind(this),\n activeAll: false,\n icons: [React.createElement(_uxcore.Icon, { name: 'xiaolian-line' }), React.createElement(_uxcore.Icon, { name: 'kulian-line' })],\n activeIcons: [React.createElement(_uxcore.Icon, { name: 'xiaolian-full' }), React.createElement(_uxcore.Icon, { name: 'kulian-full' })]\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-rate-demo-emotion'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Rate } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Icon } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n total: <span class=\"hljs-number\">5</span>,\n value: <span class=\"hljs-number\">3</span>,\n };\n <span class=\"hljs-keyword\">this</span>.scoreTips = [\n <span class=\"hljs-string\">'哇，超出期望啊'</span>,\n <span class=\"hljs-string\">'不给力啊'</span>,\n ];\n }\n\n onChange(val) {\n <span class=\"hljs-built_in\">console</span>.log(val);\n <span class=\"hljs-keyword\">this</span>.setState({\n value: val,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo-wrp\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Rate</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"rate-demo\"</span>\n <span class=\"hljs-attribute\">total</span>=<span class=\"hljs-value\">{2}</span>\n <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"large\"</span>\n <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.value}</span>\n <span class=\"hljs-attribute\">scoreTips</span>=<span class=\"hljs-value\">{this.scoreTips}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.onChange.bind(this)}</span>\n <span class=\"hljs-attribute\">activeAll</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">icons</span>=<span class=\"hljs-value\">{[</span>\n &lt;<span class=\"hljs-attribute\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiaolian-line\"</span> /&gt;</span>,\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"kulian-line\"</span> /&gt;</span>,\n ]}\n activeIcons={[\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"xiaolian-full\"</span> /&gt;</span>,\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"kulian-full\"</span> /&gt;</span>,\n ]}\n /&gt;\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-rate-demo-emotion'));</span></code></pre></div>"},"status":"public","toc":""}]
基本使用
import classnames from 'classnames';;

import { Rate } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      total: 5,
      value: 3,
    };
    this.scoreTips = [
      '不给力啊',
      '还成吧',
      '哎呦，不错哦',
      '嗯，很给力',
      '哇，超出期望啊',
    ];
  }

  onChange(val) {
    console.log(val);
    this.setState({
      value: val,
    });
  }

  render() {
    return (
      <div className="rate-demo-wrp">
        <Rate className="rate-demo" total={this.state.total} value={this.state.value} scoreTips={this.scoreTips} onChange={this.onChange.bind(this)} />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-rate-demo-basic'));
Tip 显示在下方
import classnames from 'classnames';;

import { Rate } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      total: 5,
      value: 3,
    };
    this.scoreTips = [
      '不给力啊',
      '还成吧',
      '哎呦，不错哦',
      '嗯，很给力',
      '哇，超出期望啊',
    ];
  }

  onChange(val) {
    console.log(val);
    this.setState({
      value: val,
    });
  }

  render() {
    return (
      <div className="rate-demo-wrp">
        <Rate className="rate-demo" tipShow="always" total={this.state.total} value={this.state.value} scoreTips={this.scoreTips} onChange={this.onChange.bind(this)} />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-rate-demo-bottom'));
.rate-demo-wrp {
  display: inline-block;
}
大尺寸
import classnames from 'classnames';;

import { Rate } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      total: 5,
      value: 3,
    };
    this.scoreTips = [
      '不给力啊',
      '还成吧',
      '哎呦，不错哦',
      '嗯，很给力',
      '哇，超出期望啊',
    ];
  }

  onChange(val) {
    console.log(val);
    this.setState({
      value: val,
    });
  }

  render() {
    return (
      <div className="rate-demo-wrp">
        <Rate className="rate-demo" tipShow="always" total={this.state.total} value={this.state.value} scoreTips={this.scoreTips} onChange={this.onChange.bind(this)} size="large" />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-rate-demo-size'));
.rate-demo-wrp {
  display: inline-block;
}
情感化评价
import classnames from 'classnames';;

import { Rate } from 'uxcore';
import { Icon } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      total: 5,
      value: 3,
    };
    this.scoreTips = [
      '哇，超出期望啊',
      '不给力啊',
    ];
  }

  onChange(val) {
    console.log(val);
    this.setState({
      value: val,
    });
  }

  render() {
    return (
      <div className="rate-demo-wrp">
        <Rate
          className="rate-demo"
          total={2}
          size="large"
          value={this.state.value}
          scoreTips={this.scoreTips}
          onChange={this.onChange.bind(this)}
          activeAll={false}
          icons={[
            <Icon name="xiaolian-line" />,
            <Icon name="kulian-line" />,
          ]}
          activeIcons={[
            <Icon name="xiaolian-full" />,
            <Icon name="kulian-full" />,
          ]}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-rate-demo-emotion'));

Props

配置项 类型 必填 默认值 功能/备注 版本
value number required 0 初始值
onChange function(currentValue) required 回调函数，会返回选中的分数，从1开始计数
prefixCls string option kuma-rate 类名前缀
className string option 自定义样式的class名称
disabled bool option false 是否禁用
total number option 5 总共有多少个icon,即总分为多少
scoreTips arrayOf(string) option [] 每个star的描述文字，不传就不会显示tip。数组元素个数必须和totalScore一致
tipShow string option hover 描述文字的显示方式.可选值:hover/always
size string optional medium 星星尺寸，枚举值 large、medium
icons array optional [] 替换默认的图标 0.3.3
activeIcons array optional [] 替换激活状态的图标 0.3.3
activeAll bool optional true 是否激活所有低于 value 值的图标 0.3.3