uxcore.js - React UI Component Set

组件演示

[{"title":"点击图标复制代码","id":"components-icon-demo-basic","tags":[],"filepath":"site/components/icon/demo/basic.md","directory":"components/icon/demo","filename":"basic","meta":{"title":"点击图标复制代码","description":"\n","order":"0","filepath":"site/components/icon/demo/basic.md","filename":"basic","directory":"components/icon/demo","id":"components-icon-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 _reactClipboard = require('react-clipboard.js');\n\nvar _reactClipboard2 = _interopRequireDefault(_reactClipboard);\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 icons = ['dingding', 'xiala', 'liucheng', 'bingtu', 'lianjie', 'dayin', 'fujian', 'ren', 'paixu-jiangxu', 'paixu-shengxu', 'renyuansousuo', 'renyuanzengjia', 'shanjian', 'richeng', 'shangchuan', 'shouji', 'shoucang', 'shezhi', 'shouye', 'shuaxin', 'tuandui', 'shu', 'weizhi', 'xiazai', 'xinwen', 'xinwen1', 'yinpin', 'xiangji', 'yingyong', 'youxiang', 'zengjia', 'zhexiantu', 'number', 'number1', 'number2', 'number3', 'number4', 'number5', 'number6', 'number7', 'number8', 'number9', 'PC', 'number10', 'tupian', 'shipin', 'yibiaopan', 'wendang1', 'zhuzhuangtu1', 'sousuo', 'shanchu', 'shexiangtou', 'number-xianxing', 'number-xianxing1', 'number-xianxing2', 'number-xianxing3', 'number-xianxing4', 'number-xianxing5', 'number-xianxing6', 'number-xianxing7', 'number-xianxing8', 'number-xianxing9', 'number-xianxing10', 'riqi', 'riqiqujian', 'biaoge1', 'biaoqian', 'tuichu', 'zhanghaobianji', 'zhanghaoguanli', 'pinglun', 'renyuanmingpian', 'renyuan', 'top', 'right', 'left', 'bottom', 'left_double', 'right_double', 'shaixuan', 'xiaolian-line', 'kulian-full', 'caozuo-xingji-line', 'caozuo-xingji-full', 'kulian-line', 'xiaolian-full', 'xianshi', 'chuangjiansiyoumoban', 'jinggao', 'biaodanlei-tongyongqingchu', 'suo', 'biaoqian-qingchu', 'biaoqianxuanze-duoxuan-gou', 'jinggao-full', 'yiwen-full', 'chenggong-full', 'tishi-full', 'wangwang', 'dianhua', 'youxiang-full', 'loading-icon-round', 'caozuo-shoucang-full', 'aite', 'huxiangguanzhu', 'zengjia1', 'duigou', 'zidingyilie', 'suoxiao', 'fangda', 'fangwen', 'fanyi', 'fanyi-full', 'option-yixuan-gou', 'shouqi', 'renwufull', 'zhankai', 'qiehuanyingwen', 'xiaoxitixingfull', 'qiehuanzhongwen', 'wailian', 'jinggaocopy', 'xinxitishicopy', 'chenggongtishicopy', 'cuowu-fullcopy', 'yiwencopy', 'fanhuidingbu', 'pingjia', 'guanyu', 'qiuzhu', 'shouce', 'xiazai1', 'shu1', 'huibiao', 'guanbi', 'yincang', 'yuyuechenggong', 'yuyue', 'dianzan', 'baocun', 'ceshi', 'shanjian-full', 'zengjia-full', 'moren', 'bianji', 'guojihua', 'gengduo', 'fuli', 'nianjia', 'xinchouhesuan', 'gouwuche', 'fuhao-tongzhi', 'fuhao-shizhong-line', 'saoma', 'shoudiantong', 'ARsaomiao', 'nav-bottom', 'nav-right', 'nav-top', 'nav-left', 'dianzifapiao', 'caozuo-bianji', 'zhixiang-houtui', 'zhixiang-qianjin', 'zhongyaoshijian', 'drag', 'more-dot', 'menu'];\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 return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n icons.map(function (name, index) {\n return React.createElement(\n _reactClipboard2.default,\n {\n className: 'demo-item-clipboard',\n component: 'div',\n key: index,\n 'data-clipboard-text': '<Icon usei name=\"' + name + '\" />',\n onSuccess: function onSuccess() {\n _uxcore.Message.success('代码已复制到粘贴板');\n }\n },\n React.createElement(\n 'div',\n { className: 'demo-item', key: name },\n React.createElement(_uxcore.Icon, { name: name, className: 'demo-class' }),\n React.createElement(\n 'div',\n null,\n name\n )\n )\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-icon-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import Clipboard from 'react-clipboard.js';;\nimport { Message } from 'uxcore';\nimport { Icon } from 'uxcore';\nconst icons = [\n 'dingding',\n 'xiala',\n 'liucheng',\n 'bingtu',\n 'lianjie',\n 'dayin',\n 'fujian',\n 'ren',\n 'paixu-jiangxu',\n 'paixu-shengxu',\n 'renyuansousuo',\n 'renyuanzengjia',\n 'shanjian',\n 'richeng',\n 'shangchuan',\n 'shouji',\n 'shoucang',\n 'shezhi',\n 'shouye',\n 'shuaxin',\n 'tuandui',\n 'shu',\n 'weizhi',\n 'xiazai',\n 'xinwen',\n 'xinwen1',\n 'yinpin',\n 'xiangji',\n 'yingyong',\n 'youxiang',\n 'zengjia',\n 'zhexiantu',\n 'number',\n 'number1',\n 'number2',\n 'number3',\n 'number4',\n 'number5',\n 'number6',\n 'number7',\n 'number8',\n 'number9',\n 'PC',\n 'number10',\n 'tupian',\n 'shipin',\n 'yibiaopan',\n 'wendang1',\n 'zhuzhuangtu1',\n 'sousuo',\n 'shanchu',\n 'shexiangtou',\n 'number-xianxing',\n 'number-xianxing1',\n 'number-xianxing2',\n 'number-xianxing3',\n 'number-xianxing4',\n 'number-xianxing5',\n 'number-xianxing6',\n 'number-xianxing7',\n 'number-xianxing8',\n 'number-xianxing9',\n 'number-xianxing10',\n 'riqi',\n 'riqiqujian',\n 'biaoge1',\n 'biaoqian',\n 'tuichu',\n 'zhanghaobianji',\n 'zhanghaoguanli',\n 'pinglun',\n 'renyuanmingpian',\n 'renyuan',\n 'top',\n 'right',\n 'left',\n 'bottom',\n 'left_double',\n 'right_double',\n 'shaixuan',\n 'xiaolian-line',\n 'kulian-full',\n 'caozuo-xingji-line',\n 'caozuo-xingji-full',\n 'kulian-line',\n 'xiaolian-full',\n 'xianshi',\n 'chuangjiansiyoumoban',\n 'jinggao',\n 'biaodanlei-tongyongqingchu',\n 'suo',\n 'biaoqian-qingchu',\n 'biaoqianxuanze-duoxuan-gou',\n 'jinggao-full',\n 'yiwen-full',\n 'chenggong-full',\n 'tishi-full',\n 'wangwang',\n 'dianhua',\n 'youxiang-full',\n 'loading-icon-round',\n 'caozuo-shoucang-full',\n 'aite',\n 'huxiangguanzhu',\n 'zengjia1',\n 'duigou',\n 'zidingyilie',\n 'suoxiao',\n 'fangda',\n 'fangwen',\n 'fanyi',\n 'fanyi-full',\n 'option-yixuan-gou',\n 'shouqi',\n 'renwufull',\n 'zhankai',\n 'qiehuanyingwen',\n 'xiaoxitixingfull',\n 'qiehuanzhongwen',\n 'wailian',\n 'jinggaocopy',\n 'xinxitishicopy',\n 'chenggongtishicopy',\n 'cuowu-fullcopy',\n 'yiwencopy',\n 'fanhuidingbu',\n 'pingjia',\n 'guanyu',\n 'qiuzhu',\n 'shouce',\n 'xiazai1',\n 'shu1',\n 'huibiao',\n 'guanbi',\n 'yincang',\n 'yuyuechenggong',\n 'yuyue',\n 'dianzan',\n 'baocun',\n 'ceshi',\n 'shanjian-full',\n 'zengjia-full',\n 'moren',\n 'bianji',\n 'guojihua',\n 'gengduo',\n 'fuli',\n 'nianjia',\n 'xinchouhesuan',\n 'gouwuche',\n 'fuhao-tongzhi',\n 'fuhao-shizhong-line',\n 'saoma',\n 'shoudiantong',\n 'ARsaomiao',\n 'nav-bottom',\n 'nav-right',\n 'nav-top',\n 'nav-left',\n 'dianzifapiao',\n 'caozuo-bianji',\n 'zhixiang-houtui',\n 'zhixiang-qianjin',\n 'zhongyaoshijian',\n 'drag',\n 'more-dot',\n 'menu',\n\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n {icons.map((name, index) => (\n <Clipboard\n className=\"demo-item-clipboard\"\n component=\"div\"\n key={index}\n data-clipboard-text={`<Icon usei name=\"${name}\" />`}\n onSuccess={() => {\n Message.success('代码已复制到粘贴板');\n }}\n >\n <div className=\"demo-item\" key={name}>\n <Icon name={name} className=\"demo-class\" />\n <div>{name}</div>\n </div>\n </Clipboard>\n ))}\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-icon-demo-basic'));</code></pre></div><style type=\"text/css\">.demo-item {\n display: inline-block;\n width: 70px;\n height: 70px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 5px;\n background: #fafafa;\n border-radius: 3px;\n\n}\n\n.demo-item icon {\n font-size: 28px;\n}\n\n.demo-item-clipboard {\n cursor: pointer;\n display: inline-block;\n margin: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.demo-item {\n display: inline-block;\n width: 70px;\n height: 70px;\n text-align: center;\n overflow: hidden;\n text-overflow: ellipsis;\n padding: 5px;\n background: #fafafa;\n border-radius: 3px;\n\n}\n\n.demo-item icon {\n font-size: 28px;\n}\n\n.demo-item-clipboard {\n cursor: pointer;\n display: inline-block;\n margin: 10px;\n}</code></pre></div>"},"status":"public","toc":""}]

点击图标复制代码

import Clipboard from 'react-clipboard.js';;
import { Message } from 'uxcore';
import { Icon } from 'uxcore';
const icons = [
  'dingding',
  'xiala',
  'liucheng',
  'bingtu',
  'lianjie',
  'dayin',
  'fujian',
  'ren',
  'paixu-jiangxu',
  'paixu-shengxu',
  'renyuansousuo',
  'renyuanzengjia',
  'shanjian',
  'richeng',
  'shangchuan',
  'shouji',
  'shoucang',
  'shezhi',
  'shouye',
  'shuaxin',
  'tuandui',
  'shu',
  'weizhi',
  'xiazai',
  'xinwen',
  'xinwen1',
  'yinpin',
  'xiangji',
  'yingyong',
  'youxiang',
  'zengjia',
  'zhexiantu',
  'number',
  'number1',
  'number2',
  'number3',
  'number4',
  'number5',
  'number6',
  'number7',
  'number8',
  'number9',
  'PC',
  'number10',
  'tupian',
  'shipin',
  'yibiaopan',
  'wendang1',
  'zhuzhuangtu1',
  'sousuo',
  'shanchu',
  'shexiangtou',
  'number-xianxing',
  'number-xianxing1',
  'number-xianxing2',
  'number-xianxing3',
  'number-xianxing4',
  'number-xianxing5',
  'number-xianxing6',
  'number-xianxing7',
  'number-xianxing8',
  'number-xianxing9',
  'number-xianxing10',
  'riqi',
  'riqiqujian',
  'biaoge1',
  'biaoqian',
  'tuichu',
  'zhanghaobianji',
  'zhanghaoguanli',
  'pinglun',
  'renyuanmingpian',
  'renyuan',
  'top',
  'right',
  'left',
  'bottom',
  'left_double',
  'right_double',
  'shaixuan',
  'xiaolian-line',
  'kulian-full',
  'caozuo-xingji-line',
  'caozuo-xingji-full',
  'kulian-line',
  'xiaolian-full',
  'xianshi',
  'chuangjiansiyoumoban',
  'jinggao',
  'biaodanlei-tongyongqingchu',
  'suo',
  'biaoqian-qingchu',
  'biaoqianxuanze-duoxuan-gou',
  'jinggao-full',
  'yiwen-full',
  'chenggong-full',
  'tishi-full',
  'wangwang',
  'dianhua',
  'youxiang-full',
  'loading-icon-round',
  'caozuo-shoucang-full',
  'aite',
  'huxiangguanzhu',
  'zengjia1',
  'duigou',
  'zidingyilie',
  'suoxiao',
  'fangda',
  'fangwen',
  'fanyi',
  'fanyi-full',
  'option-yixuan-gou',
  'shouqi',
  'renwufull',
  'zhankai',
  'qiehuanyingwen',
  'xiaoxitixingfull',
  'qiehuanzhongwen',
  'wailian',
  'jinggaocopy',
  'xinxitishicopy',
  'chenggongtishicopy',
  'cuowu-fullcopy',
  'yiwencopy',
  'fanhuidingbu',
  'pingjia',
  'guanyu',
  'qiuzhu',
  'shouce',
  'xiazai1',
  'shu1',
  'huibiao',
  'guanbi',
  'yincang',
  'yuyuechenggong',
  'yuyue',
  'dianzan',
  'baocun',
  'ceshi',
  'shanjian-full',
  'zengjia-full',
  'moren',
  'bianji',
  'guojihua',
  'gengduo',
  'fuli',
  'nianjia',
  'xinchouhesuan',
  'gouwuche',
  'fuhao-tongzhi',
  'fuhao-shizhong-line',
  'saoma',
  'shoudiantong',
  'ARsaomiao',
  'nav-bottom',
  'nav-right',
  'nav-top',
  'nav-left',
  'dianzifapiao',
  'caozuo-bianji',
  'zhixiang-houtui',
  'zhixiang-qianjin',
  'zhongyaoshijian',
  'drag',
  'more-dot',
  'menu',

];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div>
        {icons.map((name, index) => (
          <Clipboard
            className="demo-item-clipboard"
            component="div"
            key={index}
            data-clipboard-text={`<Icon usei name="${name}" />`}
            onSuccess={() => {
              Message.success('代码已复制到粘贴板');
            }}
          >
            <div className="demo-item" key={name}>
              <Icon name={name} className="demo-class" />
              <div>{name}</div>
            </div>
          </Clipboard>
        ))}
      </div>
    );
  }
}

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

.demo-item {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  background: #fafafa;
  border-radius: 3px;

}

.demo-item icon {
  font-size: 28px;
}

.demo-item-clipboard {
  cursor: pointer;
  display: inline-block;
  margin: 10px;
}

Props

Name	Type	Required	Default	Comments
usei	bool	no	false	使用 `<i>` 标签渲染 ICON，建议开启
name	string	no	shezhi	图标名字
className	string	no		额外类名