uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-notice-icon-demo-basic","tags":[],"filepath":"site/components/notice-icon/demo/basic.md","directory":"components/notice-icon/demo","filename":"basic","meta":{"title":"基本","description":"\n基本使用\n","order":"0","filepath":"site/components/notice-icon/demo/basic.md","filename":"basic","directory":"components/notice-icon/demo","id":"components-notice-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 _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.onBottomClick = function () {\n console.log('Bottom action bar is clicked');\n };\n\n _this.onTopClick = function () {\n console.log('Top action is activated');\n };\n\n _this.onVisibleChange = function (isDisplay) {\n console.log(isDisplay);\n };\n\n _this.onIconClick = function (text) {\n console.log(text);\n };\n\n _this.state = {\n text: 'hahah'\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var topAction = React.createElement(\n 'span',\n { onClick: this.onTopClick },\n '\\u64CD\\u4F5C'\n );\n var bottomAction = [{ \"text\": \"操作一\", \"action\": function action() {\n console.log(\"Left Clicked\");\n } }, { \"text\": \"操作二\", \"action\": function action() {\n console.log(\"Middle Clicked\");\n } }, { \"text\": \"操作三\", \"action\": function action() {\n console.log(\"Right Clicked\");\n } }];\n // const bottomAction = { text: '查看通知', action() { console.log('Clicked'); } };\n // const bottomAction = _ => <Button/>\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.NoticeIcon,\n {\n overlayClassName: 'test-popover',\n emptyIcon: 'active_empty',\n topAction: topAction,\n bottomAction: bottomAction,\n className: 'test',\n dot: true,\n enablePopover: true,\n trigger: 'click'\n },\n React.createElement(\n 'div',\n { style: { width: '100%', height: '100px', lineHeight: '100px', textAlign: 'center' } },\n '\\u8FD9\\u91CC\\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-notice-icon-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport classnames from 'classnames';;\n\nimport { NoticeIcon } from 'uxcore';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n text: 'hahah',\n };\n }\n onBottomClick= () => {\n console.log('Bottom action bar is clicked');\n }\n onTopClick = () => {\n console.log('Top action is activated');\n }\n onVisibleChange = (isDisplay) => {\n console.log(isDisplay);\n }\n onIconClick = (text) => {\n console.log(text);\n }\n render() {\n const topAction = <span onClick={this.onTopClick}>操作</span>;\n const bottomAction = [\n { \"text\":\"操作一\", \"action\": function(){ console.log(\"Left Clicked\") } },\n { \"text\":\"操作二\", \"action\": function(){ console.log(\"Middle Clicked\") } },\n { \"text\":\"操作三\", \"action\": function(){ console.log(\"Right Clicked\") } }\n ]\n // const bottomAction = { text: '查看通知', action() { console.log('Clicked'); } };\n // const bottomAction = _ => <Button/>\n return (\n <div>\n <NoticeIcon\n overlayClassName=\"test-popover\"\n emptyIcon=\"active_empty\"\n topAction={topAction}\n bottomAction={bottomAction}\n className=\"test\"\n dot\n enablePopover\n trigger=\"click\"\n >\n <div style={{ width:'100%',height:'100px', lineHeight: '100px', textAlign: 'center' }}>这里可以自定义内容</div>\n </NoticeIcon>\n </div>\n );\n }\n}\n\n\nReactDOM.render(\n <Demo />,\n document.getElementById('components-notice-icon-demo-basic'));</code></pre></div>"},"status":"public","toc":""}]

基本

基本使用


import classnames from 'classnames';;

import { NoticeIcon } from 'uxcore';


class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'hahah',
    };
  }
  onBottomClick= () => {
    console.log('Bottom action bar is clicked');
  }
  onTopClick = () => {
    console.log('Top action is activated');
  }
  onVisibleChange = (isDisplay) => {
    console.log(isDisplay);
  }
  onIconClick = (text) => {
    console.log(text);
  }
  render() {
    const topAction = <span onClick={this.onTopClick}>操作</span>;
    const bottomAction = [
        { "text":"操作一", "action": function(){ console.log("Left Clicked") } },
        { "text":"操作二", "action": function(){ console.log("Middle Clicked") } },
        { "text":"操作三", "action": function(){ console.log("Right Clicked") } }
      ]
    // const bottomAction = { text: '查看通知', action() { console.log('Clicked'); } };
    // const bottomAction = _ => <Button/>
    return (
      <div>
        <NoticeIcon
          overlayClassName="test-popover"
          emptyIcon="active_empty"
          topAction={topAction}
          bottomAction={bottomAction}
          className="test"
          dot
          enablePopover
          trigger="click"
        >
          <div style={{ width:'100%',height:'100px', lineHeight: '100px', textAlign: 'center' }}>这里可以自定义内容</div>
        </NoticeIcon>
      </div>
    );
  }
}


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

Props

Name	Type	Required	Default	Comments
icon	string	optional	xiaoxitixingfull	通知图标; http://uxco.re/components/icon/
dot	boolean	optional	false	是否显示通知数量；默认不展示数字，只有一个小红点
count	number	optional	-	通知的数量
overflowCount	number	optional	99	通知封顶的数字
trigger	string	optional	hover	trigger mode：'hover' or 'click'
title	string	optional	通知	通知标题
placement	string	optional	bottomRight	箭头位置
emptyIcon	string	optional	默认图标	其他可选：'access_restriction','acitve_empty','request_error','search_empty','unknown_error';http://uxco.re/components/icon/
emptyText	string	optional	暂无数据	占位文字
onVisibleChange	function	optional	fuction(visible)	显隐状态的回调
topAction	React Element	optional	-	右上角操作
bottomAction	object \	render function	optional	-	支持默认*和自定义形式
className	string	opitonal	-	添加在icon上的class
overlayClassName	string	opitonal	-	添加在Popover上的class
enablePopover	bool	optional	-	false	是否使用弹窗
onIconClick	function	optional	-	点击Icon触发的事件，但在trigger mode 是 'click' 且使用弹窗时不会触发
themeType	string	optional	'default'	其他可选: 'dark'

* 如果propTypes为object则使用默认样式渲染，object需按如下定义

{
    text: string,
    action: function
}