uxcore.js - React UI Component Set

组件演示

[{"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\">import classnames from 'classnames';;\n\nimport { Rate } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n total: 5,\n value: 3,\n };\n this.scoreTips = [\n '不给力啊',\n '还成吧',\n '哎呦，不错哦',\n '嗯，很给力',\n '哇，超出期望啊',\n ];\n }\n\n onChange(val) {\n console.log(val);\n this.setState({\n value: val,\n });\n }\n\n render() {\n return (\n <div className=\"rate-demo-wrp\">\n <Rate className=\"rate-demo\" total={this.state.total} value={this.state.value} scoreTips={this.scoreTips} onChange={this.onChange.bind(this)} />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-rate-demo-basic'));</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\">import classnames from 'classnames';;\n\nimport { Rate } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n total: 5,\n value: 3,\n };\n this.scoreTips = [\n '不给力啊',\n '还成吧',\n '哎呦，不错哦',\n '嗯，很给力',\n '哇，超出期望啊',\n ];\n }\n\n onChange(val) {\n console.log(val);\n this.setState({\n value: val,\n });\n }\n\n render() {\n return (\n <div className=\"rate-demo-wrp\">\n <Rate className=\"rate-demo\" tipShow=\"always\" total={this.state.total} value={this.state.value} scoreTips={this.scoreTips} onChange={this.onChange.bind(this)} />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-rate-demo-bottom'));</code></pre></div><style type=\"text/css\">.rate-demo-wrp {\n display: inline-block;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.rate-demo-wrp {\n display: inline-block;\n}</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\">import classnames from 'classnames';;\n\nimport { Rate } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n total: 5,\n value: 3,\n };\n this.scoreTips = [\n '不给力啊',\n '还成吧',\n '哎呦，不错哦',\n '嗯，很给力',\n '哇，超出期望啊',\n ];\n }\n\n onChange(val) {\n console.log(val);\n this.setState({\n value: val,\n });\n }\n\n render() {\n return (\n <div className=\"rate-demo-wrp\">\n <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 </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-rate-demo-size'));</code></pre></div><style type=\"text/css\">.rate-demo-wrp {\n display: inline-block;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.rate-demo-wrp {\n display: inline-block;\n}</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\">import classnames from 'classnames';;\n\nimport { Rate } from 'uxcore';\nimport { Icon } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n total: 5,\n value: 3,\n };\n this.scoreTips = [\n '哇，超出期望啊',\n '不给力啊',\n ];\n }\n\n onChange(val) {\n console.log(val);\n this.setState({\n value: val,\n });\n }\n\n render() {\n return (\n <div className=\"rate-demo-wrp\">\n <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={[\n <Icon name=\"xiaolian-line\" />,\n <Icon name=\"kulian-line\" />,\n ]}\n activeIcons={[\n <Icon name=\"xiaolian-full\" />,\n <Icon name=\"kulian-full\" />,\n ]}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-rate-demo-emotion'));</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