组件演示

[{"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<p>基本使用</p>\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\">\n<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> { NoticeIcon } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\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 constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n text: <span class=\"hljs-string\">'hahah'</span>,\n };\n }\n onBottomClick= () =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'Bottom action bar is clicked'</span>);\n }\n onTopClick = () =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'Top action is activated'</span>);\n }\n onVisibleChange = (isDisplay) =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(isDisplay);\n }\n onIconClick = (text) =&gt; {\n <span class=\"hljs-built_in\">console</span>.log(text);\n }\n render() {\n <span class=\"hljs-keyword\">const</span> topAction = <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.onTopClick}</span>&gt;</span>操作<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>;</span>\n <span class=\"hljs-keyword\">const</span> bottomAction = [\n { <span class=\"hljs-string\">\"text\"</span>:<span class=\"hljs-string\">\"操作一\"</span>, <span class=\"hljs-string\">\"action\"</span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\"></span>)</span>{ <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"Left Clicked\"</span>) } },\n { <span class=\"hljs-string\">\"text\"</span>:<span class=\"hljs-string\">\"操作二\"</span>, <span class=\"hljs-string\">\"action\"</span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\"></span>)</span>{ <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"Middle Clicked\"</span>) } },\n { <span class=\"hljs-string\">\"text\"</span>:<span class=\"hljs-string\">\"操作三\"</span>, <span class=\"hljs-string\">\"action\"</span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span>(<span class=\"hljs-params\"></span>)</span>{ <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">\"Right Clicked\"</span>) } }\n ]\n <span class=\"hljs-comment\">// const bottomAction = { text: '查看通知', action() { console.log('Clicked'); } };</span>\n <span class=\"hljs-comment\">// const bottomAction = _ =&gt; &lt;Button/&gt;</span>\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">NoticeIcon</span>\n <span class=\"hljs-attribute\">overlayClassName</span>=<span class=\"hljs-value\">\"test-popover\"</span>\n <span class=\"hljs-attribute\">emptyIcon</span>=<span class=\"hljs-value\">\"active_empty\"</span>\n <span class=\"hljs-attribute\">topAction</span>=<span class=\"hljs-value\">{topAction}</span>\n <span class=\"hljs-attribute\">bottomAction</span>=<span class=\"hljs-value\">{bottomAction}</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"test\"</span>\n <span class=\"hljs-attribute\">dot</span>\n <span class=\"hljs-attribute\">enablePopover</span>\n <span class=\"hljs-attribute\">trigger</span>=<span class=\"hljs-value\">\"click\"</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span>'<span class=\"hljs-attribute\">100</span>%',<span class=\"hljs-attribute\">height:</span>'<span class=\"hljs-attribute\">100px</span>', <span class=\"hljs-attribute\">lineHeight:</span> '<span class=\"hljs-attribute\">100px</span>', <span class=\"hljs-attribute\">textAlign:</span> '<span class=\"hljs-attribute\">center</span>' }}&gt;</span>这里可以自定义内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">NoticeIcon</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\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-notice-icon-demo-basic'));</span></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
}