(window.webpackJsonp=window.webpackJsonp||[]).push([[134],{728:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return j});var t=s(23),e=s.n(t),p=s(24),o=s.n(p),c=s(25),l=s.n(c),u=s(26),k=s.n(u),r=s(32),i=s.n(r),d=s(27),g=s.n(d),m=s(28),h=s.n(m),b=s(580),f=s.n(b),y=s(0),T=s.n(y),v=s(111),E=s(82),C=function(){return T.a.createElement("div",null,T.a.createElement(E.Ab,null,"tag content"),T.a.createElement(E.Ab,null,T.a.createElement("a",{href:"#"},"link")))},w=function(){return T.a.createElement("div",null,T.a.createElement(E.Ab,{theme:"grey"},"grey"),T.a.createElement(E.Ab,{theme:"red"},"red"),T.a.createElement(E.Ab,{theme:"green"},"green"),T.a.createElement(E.Ab,{theme:"yellow"},"yellow"),T.a.createElement(E.Ab,{theme:"blue"},"blue"),T.a.createElement(E.Ab,{theme:"grey",outline:!0},"grey"),T.a.createElement(E.Ab,{theme:"red",outline:!0},"red"),T.a.createElement(E.Ab,{theme:"green",outline:!0},"green"),T.a.createElement(E.Ab,{theme:"yellow",outline:!0},"yellow"),T.a.createElement(E.Ab,{theme:"blue",outline:!0},"blue"))},A=function(){return T.a.createElement("div",null,T.a.createElement(E.Ab,{style:{borderColor:"#9370db",backgroundColor:"#9370db"}},"#9370db"),T.a.createElement(E.Ab,{style:{borderColor:"#9370db",color:"#9370db"},outline:!0},"#9370db"),T.a.createElement(E.Ab,{style:{borderColor:"#87d068",backgroundColor:"#cfefdf",color:"#00a854"}},"custom color"),T.a.createElement(E.Ab,{style:{borderColor:"#778899",backgroundColor:"#778899"},rounded:!1},"rectangle"),T.a.createElement(E.Ab,{style:{borderColor:"#48d1cc",backgroundColor:"#48d1cc",fontSize:14}},"Large size"))},z=function(){return T.a.createElement("div",null,T.a.createElement(E.Ab,{closable:!0,onClose:function(n){E.db.success("Close tag")},outline:!0},"custom color"),T.a.createElement(E.Ab,{closable:!0,onClose:function(n){E.db.success("Close tag2")}},"rectangle"),T.a.createElement(E.Ab,{theme:"grey",closable:!0,closeButtonStyle:{color:"#969799"}},"custom close button color"))};function N(n){return T.a.createElement(n.tag,f()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function S(n){return T.a.createElement(N,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function _(n){return T.a.createElement(N,{tag:"style",html:n.style})}var D=function(n){function a(){var n,s;e()(this,a);for(var t=arguments.length,p=new Array(t),o=0;oTag\n

Tag is suitable for marking and sorting。

\n

Guides

\n\n

Demos

'}),T.a.createElement(D,{title:"Basic usage",id:"Demobasic",src:'import { Tag } from \'zent\';\n\nReactDOM.render(\n <div>\n <Tag>tag content</Tag>\n <Tag><a href="#">link</a></Tag>\n </div>\n , mountNode\n);'},T.a.createElement(C)),T.a.createElement(D,{title:"Two styles and five default colors",id:"Demostyle",src:'import { Tag } from \'zent\';\n\nReactDOM.render(\n <div>\n <Tag theme="grey">grey</Tag>\n <Tag theme="red">red</Tag>\n <Tag theme="green">green</Tag>\n <Tag theme="yellow">yellow</Tag>\n <Tag theme="blue">blue</Tag>\n <Tag theme="grey" outline>\n grey\n </Tag>\n <Tag theme="red" outline>\n red\n </Tag>\n <Tag theme="green" outline>\n green\n </Tag>\n <Tag theme="yellow" outline>\n yellow\n </Tag>\n <Tag theme="blue" outline>\n blue\n </Tag>\n </div>,\n mountNode\n);'},T.a.createElement(w)),T.a.createElement(D,{title:"Support custom color, rectangle style and custom size",id:"Democustom",src:'import { Tag } from \'zent\';\n\nReactDOM.render(\n <div>\n <Tag\n style={{\n borderColor: \'#9370db\',\n backgroundColor: \'#9370db\',\n }}\n >\n #9370db\n </Tag>\n <Tag\n style={{\n borderColor: \'#9370db\',\n color: \'#9370db\',\n }}\n outline\n >\n #9370db\n </Tag>\n <Tag\n style={{\n borderColor: \'#87d068\',\n backgroundColor: \'#cfefdf\',\n color: \'#00a854\',\n }}\n >\n custom color\n </Tag>\n <Tag\n style={{\n borderColor: \'#778899\',\n backgroundColor: \'#778899\',\n }}\n rounded={false}\n >\n rectangle\n </Tag>\n <Tag\n style={{\n borderColor: \'#48d1cc\',\n backgroundColor: \'#48d1cc\',\n fontSize: 14,\n }}\n >\n Large size\n </Tag>\n </div>,\n mountNode\n);'},T.a.createElement(A)),T.a.createElement(D,{title:"Support the callback function that is trigger",id:"Demoonclose",src:'import { Tag, Notify } from \'zent\';\n\nconst closeCallback = e => {\n Notify.success(\'Close tag\');\n};\n\nconst closeCallback2 = e => {\n Notify.success(\'Close tag2\');\n};\n\nReactDOM.render(\n <div>\n <Tag closable onClose={closeCallback} outline>\n custom color\n </Tag>\n <Tag closable onClose={closeCallback2}>\n rectangle\n </Tag>\n <Tag theme="grey" closable closeButtonStyle={{ color: \'#969799\' }}>\n custom close button color\n </Tag>\n </div>,\n mountNode\n);'},T.a.createElement(z)),T.a.createElement(S,{html:"

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeDefaultAlternative
themeThe preset color of tagstring'red''red'\n \n|\n \n'green'\n \n|\n \n'yellow'\n \n|\n \n'blue'\n \n|\n \n'grey'
outlineThe style with colorful border and transparent backgound.boolfalsetrue\n \n|\n \nfalse
roundedWhether the tag is rounded or notbooltruetrue\n \n|\n \nfalse
closableWhether the tag can be closedboolfalsetrue\n \n|\n \nfalse
onCloseThe callback function that is trigged when the tag is closedfuncnoop
visibleTag is visiblebooltruefalse
closeButtonStyleStyle of close buttonReact.CSSProperties
classNameThe custom classnamestring
styleThe custom styleReact.CSSProperties
\n
\n

All props are optional, a tag can be closed by using visible and onClose together.

\n
"}))}}]),a}(y.Component)}}]);