组件演示
[{"title":"添加新标签","id":"components-tag-demo-add","tags":[],"filepath":"site/components/tag/demo/add.md","directory":"components/tag/demo","filename":"add","meta":{"title":"添加新标签","description":"\n<p>基本使用。</p>\n","order":"1","filepath":"site/components/tag/demo/add.md","filename":"add","directory":"components/tag/demo","id":"components-tag-demo-add","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 _uxcore = require('uxcore');\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\nvar Item = _uxcore.Tag.Item;\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 list: ['用户体验', '精品打造', '精益求精']\n };\n _this.onAdd = _this.onAdd.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onAdd',\n value: function onAdd(value) {\n this.setState({\n list: this.state.list.concat([value])\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n _uxcore.Tag,\n { onAdd: this.onAdd },\n this.state.list.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index },\n item\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-add'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n list: ['用户体验', '精品打造', '精益求精'],\n };\n this.onAdd = this.onAdd.bind(this);\n }\n\n onAdd(value) {\n this.setState({\n list: this.state.list.concat([value]),\n });\n }\n\n render() {\n const me = this;\n return (\n <Tag onAdd={this.onAdd}>\n {this.state.list.map((item, index) => (\n <Item key={index}>{item}</Item>\n ))}\n </Tag>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tag-demo-add'));</code></pre></div>"},"status":"public","toc":""},{"title":"点赞","id":"components-tag-demo-like","tags":[],"filepath":"site/components/tag/demo/like.md","directory":"components/tag/demo","filename":"like","meta":{"title":"点赞","description":"\n","order":"2","filepath":"site/components/tag/demo/like.md","filename":"like","directory":"components/tag/demo","id":"components-tag-demo-like","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 _uxcore = require('uxcore');\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\nvar Item = _uxcore.Tag.Item;\n\n\nvar tagData = [{\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true\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 data: tagData\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onLike',\n value: function onLike(tag) {\n var me = this;\n var data = me.state.data;\n\n data = data.map(function (item) {\n if (item.tag === tag) {\n item.count += 1;\n }\n return item;\n });\n\n me.setState({\n data: data\n });\n\n console.log('赞标签: ', tag);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var props = {\n className: 'tag-classname',\n addTags: false,\n locale: 'zh-cn'\n };\n\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n _uxcore.Tag,\n props,\n me.state.data.map(function (item, index) {\n return React.createElement(\n Item,\n {\n key: 'uxcore-tag-item-' + index,\n className: item.createByOwner ? 'create-by-owner' : '',\n tag: item.tag,\n count: item.count,\n canAddCount: item.canAddCount,\n maxDisplayCount: 99,\n onAddCount: me.onLike.bind(me),\n locale: 'zh-cn'\n },\n item.tag\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-like'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nconst tagData = [\n {\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true,\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: tagData,\n };\n }\n\n onLike(tag) {\n const me = this;\n let data = me.state.data;\n\n data = data.map((item) => {\n if (item.tag === tag) {\n item.count += 1;\n }\n return item;\n });\n\n me.setState({\n data,\n });\n\n console.log('赞标签: ', tag);\n }\n\n render() {\n const me = this;\n\n const props = {\n className: 'tag-classname',\n addTags: false,\n locale: 'zh-cn',\n };\n\n return (\n <div className=\"demo\">\n\n <Tag {...props}>\n {me.state.data.map((item, index) => (\n <Item\n key={`uxcore-tag-item-${index}`}\n className={item.createByOwner ? 'create-by-owner' : ''}\n tag={item.tag}\n count={item.count}\n canAddCount={item.canAddCount}\n maxDisplayCount={99}\n onAddCount={me.onLike.bind(me)}\n locale=\"zh-cn\"\n >\n {item.tag}\n </Item>\n ))}\n </Tag>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tag-demo-like'));</code></pre></div>"},"status":"public","toc":""},{"title":"实际场景","id":"components-tag-demo-complex","tags":[],"filepath":"site/components/tag/demo/complex.md","directory":"components/tag/demo","filename":"complex","meta":{"title":"实际场景","description":"\n","order":"3","filepath":"site/components/tag/demo/complex.md","filename":"complex","directory":"components/tag/demo","id":"components-tag-demo-complex","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 _uxcore = require('uxcore');\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\nvar Item = _uxcore.Tag.Item;\n\n\nvar tagData = [{\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建100',\n count: 100,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: '自己创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '自己创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '自己创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '测试一下',\n count: 5,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '点过赞',\n count: 100,\n canAddCount: false,\n createByOwner: false\n}, {\n tag: '点过赞2',\n count: 2,\n canAddCount: false,\n createByOwner: false\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 data: tagData\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onClickTag',\n value: function onClickTag(tag) {\n console.log('点击标签: ', tag);\n }\n }, {\n key: 'onAdd',\n value: function onAdd(tag) {\n var me = this;\n var data = me.state.data;\n\n var item = {\n tag: tag,\n count: 0,\n canAddCount: false,\n createByOwner: false\n };\n\n data.push(item);\n\n me.setState({\n data: data\n });\n\n console.log('\\u6DFB\\u52A0\\u6807\\u7B7E: ' + tag);\n }\n }, {\n key: 'onLike',\n value: function onLike(tag) {\n var me = this;\n var data = me.state.data;\n\n data = data.map(function (item) {\n if (item.tag === tag) {\n item.count += 1;\n item.canAddCount = false;\n }\n return item;\n });\n\n me.setState({\n data: data\n });\n\n console.log('赞标签: ', tag);\n }\n }, {\n key: 'onDelete',\n value: function onDelete(tag, cb) {\n var me = this;\n var data = me.state.data;\n\n data = data.filter(function (item) {\n return item.tag !== tag;\n });\n\n if (cb) {\n cb();\n }\n me.setState({\n data: data\n });\n\n console.log('\\u5220\\u9664\\u6807\\u7B7E: ' + tag);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var props = {\n className: 'tag-classname',\n addTags: true,\n onAdd: me.onAdd.bind(me),\n locale: 'zh-cn'\n // locale: 'en-us'\n };\n\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n _uxcore.Tag,\n props,\n me.state.data.map(function (item, index) {\n return React.createElement(\n Item,\n {\n key: 'uxcore-tag-item-' + index,\n className: item.createByOwner ? 'create-by-owner' : '',\n tag: item.tag,\n count: item.count,\n canAddCount: item.canAddCount,\n canDelete: true,\n onClick: me.onClickTag.bind(me),\n maxDisplayCount: 99,\n onAddCount: me.onLike.bind(me),\n onDelete: me.onDelete.bind(me),\n confirmDeleteText: '\\u786E\\u5B9A\\u5220\\u9664\\u8BE5\\u6807\\u7B7E\\u5417?',\n locale: 'zh-cn'\n },\n item.tag\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-complex'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nconst tagData = [\n {\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建100',\n count: 100,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: '自己创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '自己创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '自己创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '测试一下',\n count: 5,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '点过赞',\n count: 100,\n canAddCount: false,\n createByOwner: false,\n },\n {\n tag: '点过赞2',\n count: 2,\n canAddCount: false,\n createByOwner: false,\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: tagData,\n };\n }\n\n onClickTag(tag) {\n console.log('点击标签: ', tag);\n }\n onAdd(tag) {\n const me = this;\n const data = me.state.data;\n\n\n const item = {\n tag,\n count: 0,\n canAddCount: false,\n createByOwner: false,\n };\n\n data.push(item);\n\n me.setState({\n data,\n });\n\n console.log(`添加标签: ${tag}`);\n }\n onLike(tag) {\n const me = this;\n let data = me.state.data;\n\n data = data.map((item) => {\n if (item.tag === tag) {\n item.count += 1;\n item.canAddCount = false;\n }\n return item;\n });\n\n me.setState({\n data,\n });\n\n console.log('赞标签: ', tag);\n }\n onDelete(tag, cb) {\n const me = this;\n let data = me.state.data;\n\n data = data.filter(item => item.tag !== tag);\n\n if (cb) {\n cb();\n }\n me.setState({\n data,\n });\n\n console.log(`删除标签: ${tag}`);\n }\n\n render() {\n const me = this;\n\n const props = {\n className: 'tag-classname',\n addTags: true,\n onAdd: me.onAdd.bind(me),\n locale: 'zh-cn',\n // locale: 'en-us'\n };\n\n return (\n <div className=\"demo\">\n\n <Tag {...props}>\n {me.state.data.map((item, index) => (\n <Item\n key={`uxcore-tag-item-${index}`}\n className={item.createByOwner ? 'create-by-owner' : ''}\n tag={item.tag}\n count={item.count}\n canAddCount={item.canAddCount}\n canDelete\n onClick={me.onClickTag.bind(me)}\n maxDisplayCount={99}\n onAddCount={me.onLike.bind(me)}\n onDelete={me.onDelete.bind(me)}\n confirmDeleteText=\"确定删除该标签吗?\"\n locale=\"zh-cn\"\n >\n {item.tag}\n </Item>\n ))}\n </Tag>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tag-demo-complex'));</code></pre></div>"},"status":"public","toc":""},{"title":"展示型","id":"components-tag-demo-show","tags":[],"filepath":"site/components/tag/demo/show.md","directory":"components/tag/demo","filename":"show","meta":{"title":"展示型","description":"\n<p>用于展示的 tag。</p>\n","order":"4","filepath":"site/components/tag/demo/show.md","filename":"show","directory":"components/tag/demo","id":"components-tag-demo-show","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 _uxcore = require('uxcore');\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\nvar Item = _uxcore.Tag.Item;\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 showData: ['关键词：阿里', '关键词：百度']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onDelete2',\n value: function onDelete2(tag, cb) {\n var showData = this.state.showData.filter(function (item) {\n return item !== tag;\n });\n this.setState({\n showData: showData\n }, function () {\n if (cb) {\n cb();\n }\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n { style: { margin: '8px 0' } },\n '\\u5C55\\u793A\\u578B TAG \\uFF08\\u53EA\\u8BFB\\uFF09'\n ),\n React.createElement(\n _uxcore.Tag,\n { addTags: false },\n React.createElement(\n Item,\n { type: 'show' },\n 'Top50 \\u5165\\u804C\\u5B66\\u6821'\n ),\n React.createElement(\n Item,\n { type: 'success' },\n '\\u79EF\\u6781\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'danger' },\n '\\u8B66\\u793A\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'info' },\n '\\u5E38\\u89C4\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'warning' },\n '\\u6CE8\\u610F'\n )\n ),\n React.createElement(\n 'h2',\n { style: { margin: '8px 0' } },\n '\\u5C55\\u793A\\u578B TAG \\uFF08\\u53EF\\u5220\\u9664\\uFF09'\n ),\n React.createElement(\n _uxcore.Tag,\n { addTags: false },\n me.state.showData.map(function (item) {\n return React.createElement(\n Item,\n { type: 'show', canDelete: true, key: item, tag: item, onDelete: me.onDelete2.bind(me) },\n item\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-show'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n showData: ['关键词：阿里', '关键词：百度'],\n };\n }\n\n onDelete2(tag, cb) {\n const showData = this.state.showData.filter(item => item !== tag);\n this.setState({\n showData,\n }, () => {\n if (cb) {\n cb();\n }\n });\n }\n\n render() {\n const me = this;\n return (\n <div>\n <h2 style={{ margin: '8px 0' }}>展示型 TAG （只读）</h2>\n <Tag addTags={false}>\n <Item type=\"show\">Top50 入职学校</Item>\n <Item type=\"success\">积极提醒</Item>\n <Item type=\"danger\">警示提醒</Item>\n <Item type=\"info\">常规提醒</Item>\n <Item type=\"warning\">注意</Item>\n </Tag>\n <h2 style={{ margin: '8px 0' }}>展示型 TAG （可删除）</h2>\n <Tag addTags={false}>\n {me.state.showData.map(item => (\n <Item type=\"show\" canDelete key={item} tag={item} onDelete={me.onDelete2.bind(me)}>{item}</Item>\n ))}\n </Tag>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-tag-demo-show'));</code></pre></div>"},"status":"public","toc":""}]
import { Tag } from 'uxcore';
const { Item } = Tag;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
list: ['用户体验', '精品打造', '精益求精'],
};
this.onAdd = this.onAdd.bind(this);
}
onAdd(value) {
this.setState({
list: this.state.list.concat([value]),
});
}
render() {
const me = this;
return (
<Tag onAdd={this.onAdd}>
{this.state.list.map((item, index) => (
<Item key={index}>{item}</Item>
))}
</Tag>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-tag-demo-add'));import { Tag } from 'uxcore';
const { Item } = Tag;
const tagData = [
{
tag: 'owner创建0',
count: 0,
canAddCount: true,
createByOwner: true,
},
{
tag: 'owner创建1',
count: 1,
canAddCount: true,
createByOwner: true,
},
];
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
data: tagData,
};
}
onLike(tag) {
const me = this;
let data = me.state.data;
data = data.map((item) => {
if (item.tag === tag) {
item.count += 1;
}
return item;
});
me.setState({
data,
});
console.log('赞标签: ', tag);
}
render() {
const me = this;
const props = {
className: 'tag-classname',
addTags: false,
locale: 'zh-cn',
};
return (
<div className="demo">
<Tag {...props}>
{me.state.data.map((item, index) => (
<Item
key={`uxcore-tag-item-${index}`}
className={item.createByOwner ? 'create-by-owner' : ''}
tag={item.tag}
count={item.count}
canAddCount={item.canAddCount}
maxDisplayCount={99}
onAddCount={me.onLike.bind(me)}
locale="zh-cn"
>
{item.tag}
</Item>
))}
</Tag>
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-tag-demo-like'));import { Tag } from 'uxcore';
const { Item } = Tag;
const tagData = [
{
tag: 'owner创建0',
count: 0,
canAddCount: true,
createByOwner: true,
},
{
tag: 'owner创建1',
count: 1,
canAddCount: true,
createByOwner: true,
},
{
tag: 'owner创建100',
count: 100,
canAddCount: true,
createByOwner: true,
},
{
tag: '自己创建0',
count: 0,
canAddCount: true,
createByOwner: false,
},
{
tag: '自己创建1',
count: 1,
canAddCount: true,
createByOwner: false,
},
{
tag: '自己创建100',
count: 100,
canAddCount: true,
createByOwner: false,
},
{
tag: '他人创建0',
count: 0,
canAddCount: true,
createByOwner: false,
},
{
tag: '他人创建1',
count: 1,
canAddCount: true,
createByOwner: false,
},
{
tag: '他人创建100',
count: 100,
canAddCount: true,
createByOwner: false,
},
{
tag: '测试一下',
count: 5,
canAddCount: true,
createByOwner: false,
},
{
tag: '点过赞',
count: 100,
canAddCount: false,
createByOwner: false,
},
{
tag: '点过赞2',
count: 2,
canAddCount: false,
createByOwner: false,
},
];
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
data: tagData,
};
}
onClickTag(tag) {
console.log('点击标签: ', tag);
}
onAdd(tag) {
const me = this;
const data = me.state.data;
const item = {
tag,
count: 0,
canAddCount: false,
createByOwner: false,
};
data.push(item);
me.setState({
data,
});
console.log(`添加标签: ${tag}`);
}
onLike(tag) {
const me = this;
let data = me.state.data;
data = data.map((item) => {
if (item.tag === tag) {
item.count += 1;
item.canAddCount = false;
}
return item;
});
me.setState({
data,
});
console.log('赞标签: ', tag);
}
onDelete(tag, cb) {
const me = this;
let data = me.state.data;
data = data.filter(item => item.tag !== tag);
if (cb) {
cb();
}
me.setState({
data,
});
console.log(`删除标签: ${tag}`);
}
render() {
const me = this;
const props = {
className: 'tag-classname',
addTags: true,
onAdd: me.onAdd.bind(me),
locale: 'zh-cn',
// locale: 'en-us'
};
return (
<div className="demo">
<Tag {...props}>
{me.state.data.map((item, index) => (
<Item
key={`uxcore-tag-item-${index}`}
className={item.createByOwner ? 'create-by-owner' : ''}
tag={item.tag}
count={item.count}
canAddCount={item.canAddCount}
canDelete
onClick={me.onClickTag.bind(me)}
maxDisplayCount={99}
onAddCount={me.onLike.bind(me)}
onDelete={me.onDelete.bind(me)}
confirmDeleteText="确定删除该标签吗?"
locale="zh-cn"
>
{item.tag}
</Item>
))}
</Tag>
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-tag-demo-complex'));import { Tag } from 'uxcore';
const { Item } = Tag;
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
showData: ['关键词：阿里', '关键词：百度'],
};
}
onDelete2(tag, cb) {
const showData = this.state.showData.filter(item => item !== tag);
this.setState({
showData,
}, () => {
if (cb) {
cb();
}
});
}
render() {
const me = this;
return (
<div>
<h2 style={{ margin: '8px 0' }}>展示型 TAG （只读）</h2>
<Tag addTags={false}>
<Item type="show">Top50 入职学校</Item>
<Item type="success">积极提醒</Item>
<Item type="danger">警示提醒</Item>
<Item type="info">常规提醒</Item>
<Item type="warning">注意</Item>
</Tag>
<h2 style={{ margin: '8px 0' }}>展示型 TAG （可删除）</h2>
<Tag addTags={false}>
{me.state.showData.map(item => (
<Item type="show" canDelete key={item} tag={item} onDelete={me.onDelete2.bind(me)}>{item}</Item>
))}
</Tag>
</div>
);
}
}
ReactDOM.render(
<Demo />
, document.getElementById('components-tag-demo-show'));Props
Tag
| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
|---|---|---|---|---|
| className | string | optional | '' | 额外的className |
| addTags | boolean | optional | true | 是否可以新增tag |
| onAdd(tagName) | function | optional | noop | 新增tag的回调,tagName为新增的标签名 |
| locale | string | optional | 'zh-cn' | 语言，另可选'en-us', 'pl-pl' |
TagItem
通过 Tag.Item 取得。
| 配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
|---|---|---|---|---|
| className | string | optional | '' | 额外的className |
| tag | string | require | '' | tag的值 |
| type | string | optional | 枚举值 show, success, warning, info, danger |
|
| count | number | optional | 0 | 标签后面的数字 |
| canAddCount | boolean | optional | false | 是否可以增加数字 |
| canDelete | boolean | optional | false | 是否可以删除标签 |
| onClick(tagName) | function | optional | noop | 点标签回调 |
| maxDisplayCount | number | optional | 99 | 最大显示数字 |
| onAddCount(tagName) | function | optional | noop | 点击增加数字的加号回调 |
| onDelete(tagName, cb) | function | optional | noop | 点击删除icon回调 注意手动调用cb，否则弹窗不会消失 |
| confirmDeleteText | string | optional | '' | 确认删除文案，如果不填则直接触发onDelete回调 |
