@uiw/doc/web/static/js/3588.40e7d1bc.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3588],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>p});var r=t(8573),o=t(6320),i=t(8563),l=t(7622),c=t(7937);const a={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var u=t(4760);function f(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,u.jsxs)("div",{className:a.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,u.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,u.jsx)("br",{}),(0,u.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,u.jsx)(c.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,u.jsx)(c.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,u.jsx)(c.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,u.jsx)(c.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,u.jsx)(c.Divider,{type:"vertical"}),(0,u.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const s=o.ZP.Preview,m=o.ZP.Code,d=o.ZP.Toolbar,y=e=>{var n,t;let{node:l,components:c,data:a,...f}=e;const y=(0,r.useRef)(null),{headings:p,headingsList:b,...v}=f;(0,r.useEffect)((()=>{if(y.current){const e=y.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(y.current,e)}}),[y]);const g=null===l||void 0===l||null===(n=l.position)||void 0===n?void 0:n.start.line,j=null===l||void 0===l||null===(t=l.data)||void 0===t?void 0:t.meta,_=(0,i.Mx)(j)||String(g),x=c["".concat(_)];if(_&&"function"===typeof x){const e=a[_].value||"",n=(0,i.aE)(j||"");return(0,u.jsxs)(o.ZP,{ref:y,children:[(0,u.jsx)(s,{style:{background:n.bg||"transparent"},children:(0,u.jsx)(x,{})}),(0,u.jsx)(d,{text:e,children:n.title||"Example"}),(0,u.jsx)(m,{children:(0,u.jsx)("pre",{...v})})]})}return(0,u.jsx)("code",{...v})};function p(e){return(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(l.Z,{className:a.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,u.jsx)(y,{...e,...n})}}),(0,u.jsx)(f,{path:e.path})]})}},3044:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>l});const r={components:{9:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==r(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===r(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var c=[{name:"Light Blue",cn:"\u4e3b\u8981-\u6d45\u84dd\u8272",color:"#5BB5F4",des:"\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20"},{name:"Blue",cn:"\u4e3b\u8981-\u84dd\u8272",color:"#2EA3F4",des:"\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20"},{name:"Dark Blue",cn:"\u4e3b\u8981-\u6df1\u84dd\u8272",color:"#008EF0",des:"\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20"}],a={flex:1,height:63,maxWidth:120,color:"#fff",textAlign:"center",display:"flex",justifyContent:"center",flexDirection:"column"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap"}},c.map((function(e,t){return n.default.createElement("div",{key:t,style:i({background:e.color},a)},n.default.createElement("div",null,e.name),n.default.createElement("div",null,e.color))})))}}(),40:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==r(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===r(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var c=[{name:"Green",cn:"\u6210\u529f-\u7eff\u8272",color:"#28a745"},{name:"Blue",cn:"\u4e3b\u8981-\u84dd\u8272",color:"#008EF0"},{name:"Cyan",cn:"\u4fe1\u606f-\u9752\u8272",color:"#1EABCD"},{name:"Navy",cn:"\u5bfc\u822a-\u85cf\u9752",color:"#393E48"},{name:"Yellow",cn:"\u8b66\u544a-\u9ec4\u8272",color:"#ffc107"},{name:"Orange",cn:"\u63d0\u9192-\u6a59\u8272",color:"#F95C2B"},{name:"Red",cn:"\u5371\u9669-\u7ea2\u8272",color:"#dc3545"}],a={position:"relative",minWidth:80,flex:1,height:83,color:"#fff",textAlign:"center",display:"flex",flexDirection:"column",justifyContent:"center"};return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap"}},c.map((function(e,t){return n.default.createElement("div",{key:t,style:i({background:e.color},a)},n.default.createElement("div",{style:{position:"absolute",top:3,left:5,fontSize:12,color:"rgba(255, 255, 255, 0.65)"}},e.color),n.default.createElement("div",null,e.name),n.default.createElement("div",null,e.cn))})))}}(),77:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==r(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===r(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var c=[{name:"\u767d\u8272",color:"#FFFFFF",fontColor:"#6F6F6F"},{name:"\u80cc\u666f",color:"#F6F6F6",fontColor:"#6F6F6F"},{name:"\u5206\u5272\u7ebf",color:"#F2F2F2",fontColor:"#6F6F6F"},{name:"\u8fb9\u6846",color:"#EEEEEE",fontColor:"#6F6F6F"},{name:"\u5931\u6548",color:"#EAEAEA",fontColor:"#6F6F6F"},{name:"\u8f85\u52a9",color:"#DDDDDD",fontColor:"#6F6F6F"},{name:"\u6b63\u6587",color:"#C2C2C2"},{name:"\u56fe\u6807",color:"#B9B9B9"},{name:"\u6587\u672c",color:"#A5A5A5"},{name:"\u6807\u9898",color:"#6E6E6E"}];return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap"}},c.map((function(e,t){var r={flex:1,height:63,color:"#fff",textAlign:"center",minWidth:80,flexDirection:"column",display:"flex",justifyContent:"center"};return e.fontColor&&(r.color=e.fontColor),n.default.createElement("div",{key:t,style:i({background:e.color},r)},n.default.createElement("div",null,e.name),n.default.createElement("div",null,e.color))})))}}(),118:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e};function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){l(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function l(e,n,t){return(n=function(e){var n=function(e,n){if("object"!==r(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==r(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===r(n)?n:String(n)}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var c=[{name:"\u8b66\u544a-\u9ec4\u8272",backgroundColor:"#ffc107",des:"warning"},{name:"\u63d0\u9192-\u6a59\u8272",backgroundColor:"#F95C2B",des:"remind"},{name:"\u5371\u9669-\u7ea2\u8272",backgroundColor:"#dc3545",des:"danger"},{name:"\u5bfc\u822a-\u85cf\u9752",backgroundColor:"#393E48",des:"NavMenu"},{name:"\u4e3b\u8981-\u84dd\u8272",backgroundColor:"#2EA3F4",des:"Primary"},{name:"\u6210\u529f-\u7eff\u8272",backgroundColor:"#09C62C",des:"success"},{name:"\u80cc\u666f-\u4e2d\u7070",backgroundColor:"#EAEAEA",des:"background",color:"#6F6F6F"}];return function(){return n.default.createElement("div",{style:{display:"flex",flexWrap:"wrap"}},c.map((function(e,t){var r={padding:"21px 0 7px 5px",minWidth:100,position:"relative",flex:1,height:63,color:"#fff",flexDirection:"column",display:"flex",justifyContent:"center"},o={position:"absolute",top:3,left:5,fontSize:12,color:"rgba(255, 255, 255, 0.65)"};return e.color&&(r.color=e.color,o.color=e.color),n.default.createElement("div",{key:t,style:i({background:e.backgroundColor},r)},n.default.createElement("div",{style:o},e.backgroundColor),n.default.createElement("div",null,e.name),n.default.createElement("div",{style:{fontSize:12}},e.des))})))}}()},data:{9:{name:9,meta:{bg:"#fff",toolbar:"true"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nvar colors = [{\n  name: \'Light Blue\',\n  cn: \'\u4e3b\u8981-\u6d45\u84dd\u8272\',\n  color: \'#5BB5F4\',\n  des: \'\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20\'\n}, {\n  name: \'Blue\',\n  cn: \'\u4e3b\u8981-\u84dd\u8272\',\n  color: \'#2EA3F4\',\n  des: \'\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20\'\n}, {\n  name: \'Dark Blue\',\n  cn: \'\u4e3b\u8981-\u6df1\u84dd\u8272\',\n  color: \'#008EF0\',\n  des: \'\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20\'\n}];\nvar styles = {\n  flex: 1,\n  height: 63,\n  maxWidth: 120,\n  color: \'#fff\',\n  textAlign: \'center\',\n  display: \'flex\',\n  justifyContent: \'center\',\n  flexDirection: \'column\'\n};\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", {\n    style: {\n      display: \'flex\',\n      flexWrap: \'wrap\'\n    }\n  }, colors.map(function (item, idx) {\n    return /*#__PURE__*/_react["default"].createElement("div", {\n      key: idx,\n      style: _objectSpread({\n        background: item.color\n      }, styles)\n    }, /*#__PURE__*/_react["default"].createElement("div", null, item.name), /*#__PURE__*/_react["default"].createElement("div", null, item.color));\n  }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nconst colors = [\n  { name: 'Light Blue', cn: '\u4e3b\u8981-\u6d45\u84dd\u8272', color: '#5BB5F4', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n  { name: 'Blue', cn: '\u4e3b\u8981-\u84dd\u8272', color: '#2EA3F4', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n  { name: 'Dark Blue', cn: '\u4e3b\u8981-\u6df1\u84dd\u8272', color: '#008EF0', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n];\nconst styles = {\n  flex: 1, height: 63, maxWidth: 120, color: '#fff', textAlign: 'center',\n  display: 'flex', justifyContent: 'center', flexDirection: 'column',\n};\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div>{item.name}</div>\n          <div>{item.color}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;"},40:{name:40,meta:{bg:"#fff",toolbar:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nvar colors = [{\n  name: 'Green',\n  cn: '\u6210\u529f-\u7eff\u8272',\n  color: '#28a745'\n}, {\n  name: 'Blue',\n  cn: '\u4e3b\u8981-\u84dd\u8272',\n  color: '#008EF0'\n}, {\n  name: 'Cyan',\n  cn: '\u4fe1\u606f-\u9752\u8272',\n  color: '#1EABCD'\n}, {\n  name: 'Navy',\n  cn: '\u5bfc\u822a-\u85cf\u9752',\n  color: '#393E48'\n}, {\n  name: 'Yellow',\n  cn: '\u8b66\u544a-\u9ec4\u8272',\n  color: '#ffc107'\n}, {\n  name: 'Orange',\n  cn: '\u63d0\u9192-\u6a59\u8272',\n  color: '#F95C2B'\n}, {\n  name: 'Red',\n  cn: '\u5371\u9669-\u7ea2\u8272',\n  color: '#dc3545'\n}];\nvar styles = {\n  position: 'relative',\n  minWidth: 80,\n  flex: 1,\n  height: 83,\n  color: '#fff',\n  textAlign: 'center',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center'\n};\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap'\n    }\n  }, colors.map(function (item, idx) {\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: _objectSpread({\n        background: item.color\n      }, styles)\n    }, /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        position: 'absolute',\n        top: 3,\n        left: 5,\n        fontSize: 12,\n        color: 'rgba(255, 255, 255, 0.65)'\n      }\n    }, item.color), /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, item.name), /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, item.cn));\n  }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nconst colors = [\n  { name: 'Green', cn: '\u6210\u529f-\u7eff\u8272', color: '#28a745' },\n  { name: 'Blue', cn: '\u4e3b\u8981-\u84dd\u8272', color: '#008EF0' },\n  { name: 'Cyan', cn: '\u4fe1\u606f-\u9752\u8272', color: '#1EABCD' },\n  { name: 'Navy', cn: '\u5bfc\u822a-\u85cf\u9752', color: '#393E48' },\n  { name: 'Yellow', cn: '\u8b66\u544a-\u9ec4\u8272', color: '#ffc107' },\n  { name: 'Orange', cn: '\u63d0\u9192-\u6a59\u8272', color: '#F95C2B' },\n  { name: 'Red', cn: '\u5371\u9669-\u7ea2\u8272', color: '#dc3545' },\n];\nconst styles = {\n  position: 'relative', minWidth: 80,\n  flex: 1, height: 83, color: '#fff', textAlign: 'center',\n  display: 'flex', flexDirection: 'column', justifyContent: 'center',\n};\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div style={{position: 'absolute', top: 3, left: 5, fontSize: 12, color: 'rgba(255, 255, 255, 0.65)'}}>{item.color}</div>\n          <div>{item.name}</div>\n          <div>{item.cn}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;"},77:{name:77,meta:{bg:"#fff",toolbar:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nvar colors = [{\n  name: '\u767d\u8272',\n  color: '#FFFFFF',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u80cc\u666f',\n  color: '#F6F6F6',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u5206\u5272\u7ebf',\n  color: '#F2F2F2',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u8fb9\u6846',\n  color: '#EEEEEE',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u5931\u6548',\n  color: '#EAEAEA',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u8f85\u52a9',\n  color: '#DDDDDD',\n  fontColor: '#6F6F6F'\n}, {\n  name: '\u6b63\u6587',\n  color: '#C2C2C2'\n}, {\n  name: '\u56fe\u6807',\n  color: '#B9B9B9'\n}, {\n  name: '\u6587\u672c',\n  color: '#A5A5A5'\n}, {\n  name: '\u6807\u9898',\n  color: '#6E6E6E'\n}];\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap'\n    }\n  }, colors.map(function (item, idx) {\n    var styles = {\n      flex: 1,\n      height: 63,\n      color: '#fff',\n      textAlign: 'center',\n      minWidth: 80,\n      flexDirection: 'column',\n      display: 'flex',\n      justifyContent: 'center'\n    };\n    if (item.fontColor) {\n      styles.color = item.fontColor;\n    }\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: _objectSpread({\n        background: item.color\n      }, styles)\n    }, /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, item.name), /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, item.color));\n  }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nconst colors = [\n  { name: '\u767d\u8272', color: '#FFFFFF', fontColor: '#6F6F6F' },\n  { name: '\u80cc\u666f', color: '#F6F6F6', fontColor: '#6F6F6F' },\n  { name: '\u5206\u5272\u7ebf', color: '#F2F2F2', fontColor: '#6F6F6F' },\n  { name: '\u8fb9\u6846', color: '#EEEEEE', fontColor: '#6F6F6F' },\n  { name: '\u5931\u6548', color: '#EAEAEA', fontColor: '#6F6F6F' },\n  { name: '\u8f85\u52a9', color: '#DDDDDD', fontColor: '#6F6F6F' },\n  { name: '\u6b63\u6587', color: '#C2C2C2' },\n  { name: '\u56fe\u6807', color: '#B9B9B9' },\n  { name: '\u6587\u672c', color: '#A5A5A5' },\n  { name: '\u6807\u9898', color: '#6E6E6E' },\n];\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      const styles = {\n        flex: 1, height: 63, color: '#fff', textAlign: 'center', minWidth: 80,\n        flexDirection: 'column', display: 'flex', justifyContent: 'center',\n      }\n      if (item.fontColor) {\n        styles.color = item.fontColor;\n      }\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div>{item.name}</div>\n          <div>{item.color}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;"},118:{name:118,meta:{bg:"#fff",toolbar:"true"},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, \"string\"); return _typeof(key) === \"symbol\" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== \"object\" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || \"default\"); if (_typeof(res) !== \"object\") return res; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (hint === \"string\" ? String : Number)(input); }\nvar colors = [{\n  name: '\u8b66\u544a-\u9ec4\u8272',\n  backgroundColor: '#ffc107',\n  des: 'warning'\n}, {\n  name: '\u63d0\u9192-\u6a59\u8272',\n  backgroundColor: '#F95C2B',\n  des: 'remind'\n}, {\n  name: '\u5371\u9669-\u7ea2\u8272',\n  backgroundColor: '#dc3545',\n  des: 'danger'\n}, {\n  name: '\u5bfc\u822a-\u85cf\u9752',\n  backgroundColor: '#393E48',\n  des: 'NavMenu'\n}, {\n  name: '\u4e3b\u8981-\u84dd\u8272',\n  backgroundColor: '#2EA3F4',\n  des: 'Primary'\n}, {\n  name: '\u6210\u529f-\u7eff\u8272',\n  backgroundColor: '#09C62C',\n  des: 'success'\n}, {\n  name: '\u80cc\u666f-\u4e2d\u7070',\n  backgroundColor: '#EAEAEA',\n  des: 'background',\n  color: '#6F6F6F'\n}];\nvar Demo = function Demo() {\n  return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n    style: {\n      display: 'flex',\n      flexWrap: 'wrap'\n    }\n  }, colors.map(function (item, idx) {\n    var styles = {\n      padding: '21px 0 7px 5px',\n      minWidth: 100,\n      position: 'relative',\n      flex: 1,\n      height: 63,\n      color: '#fff',\n      flexDirection: 'column',\n      display: 'flex',\n      justifyContent: 'center'\n    };\n    var colorFontSty = {\n      position: 'absolute',\n      top: 3,\n      left: 5,\n      fontSize: 12,\n      color: 'rgba(255, 255, 255, 0.65)'\n    };\n    if (item.color) {\n      styles.color = item.color;\n      colorFontSty.color = item.color;\n    }\n    return /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      key: idx,\n      style: _objectSpread({\n        background: item.backgroundColor\n      }, styles)\n    }, /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: colorFontSty\n    }, item.backgroundColor), /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, item.name), /*#__PURE__*/_react[\"default\"].createElement(\"div\", {\n      style: {\n        fontSize: 12\n      }\n    }, item.des));\n  }));\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\n\nconst colors = [\n  { name: '\u8b66\u544a-\u9ec4\u8272', backgroundColor: '#ffc107', des: 'warning', },\n  { name: '\u63d0\u9192-\u6a59\u8272', backgroundColor: '#F95C2B', des: 'remind', },\n  { name: '\u5371\u9669-\u7ea2\u8272', backgroundColor: '#dc3545', des: 'danger', },\n  { name: '\u5bfc\u822a-\u85cf\u9752', backgroundColor: '#393E48', des: 'NavMenu', },\n  { name: '\u4e3b\u8981-\u84dd\u8272', backgroundColor: '#2EA3F4', des: 'Primary', },\n  { name: '\u6210\u529f-\u7eff\u8272', backgroundColor: '#09C62C', des: 'success', },\n  { name: '\u80cc\u666f-\u4e2d\u7070', backgroundColor: '#EAEAEA', des: 'background', color: '#6F6F6F' },\n];\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      const styles = {\n        padding: '21px 0 7px 5px', minWidth: 100,\n        position: 'relative', flex: 1, height: 63, color: '#fff',\n        flexDirection: 'column', display: 'flex', justifyContent: 'center',\n      }\n      const colorFontSty = {position: 'absolute', top: 3, left: 5, fontSize: 12, color: 'rgba(255, 255, 255, 0.65)'};\n      if (item.color) {\n        styles.color = item.color;\n        colorFontSty.color = item.color;\n      }\n      return (\n        <div key={idx} style={{ background: item.backgroundColor, ...styles }}>\n          <div style={colorFontSty}>{item.backgroundColor}</div>\n          <div>{item.name}</div>\n          <div style={{ fontSize: 12 }}>{item.des}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;"}},source:"Color \u8272\u5f69\n===\n\n## \u4e3b\u8981\u989c\u8272\n\n\u4e3b\u8272\u4ee5\u8c61\u5f81\u5e7f\u9614\u6d77\u6d0b\u7684\u6e56\u84dd\u8272\u4f5c\u4e3a\u4e3b\u8272\u8c03\uff0c\u5b83\u7ed9\u4eba\u4ee5\u5e74\u8f7b\u3001\u9c9c\u660e\u3001\u6e05\u723d\u7684\u5f62\u8c61\u591a\u5c55\u73b0\u51fa\u6765\uff0c\u6e56\u84dd\u8272\u662f\u4e00\u79cd\u7eaf\u6d01\u7684\u989c\u8272\uff0c\u8c61\u5f81\u7740\u5927\u6d77\u3002\n\uff08 \u53d6\u8272\u542b\u4e49\uff1a\u6211\u4eec\u81f4\u529b\u4e8e\u521b\u65b0\uff0c\u79ef\u6781\u5e76\u4e14\u4e0d\u65ad\u52aa\u529b\uff0c\u8fd9\u6b63\u662f\u6211\u4eec\u56e2\u961f\u7684\u7cbe\u795e\u8ffd\u6c42\u3002\uff09\n\n```jsx mdx:preview&bg=#fff&toolbar=true\nimport React from 'react';\nconst colors = [\n  { name: 'Light Blue', cn: '\u4e3b\u8981-\u6d45\u84dd\u8272', color: '#5BB5F4', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n  { name: 'Blue', cn: '\u4e3b\u8981-\u84dd\u8272', color: '#2EA3F4', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n  { name: 'Dark Blue', cn: '\u4e3b\u8981-\u6df1\u84dd\u8272', color: '#008EF0', des: '\u901a\u5e38\u7528\u4e8e\u6309\u94ae\u3001\u53ca\u4efb\u4f55\u4fee\u9970\u5143\u7d20', },\n];\nconst styles = {\n  flex: 1, height: 63, maxWidth: 120, color: '#fff', textAlign: 'center',\n  display: 'flex', justifyContent: 'center', flexDirection: 'column',\n};\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div>{item.name}</div>\n          <div>{item.color}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;\n```\n\n## \u8f85\u52a9\u989c\u8272\n\n\u8fd9\u4e9b\u4eae\u4e3d\u7684\u8f85\u52a9\u8272\u591a\u7528\u4e8e\u6309\u94ae\uff0c\u63d0\u793a\uff0c\u8b66\u544a\u7b49\u4fee\u9970\u5143\u7d20\uff0c\u4ee5\u53ca\u4e00\u4e9b\u4fa7\u8fb9\u4fee\u9970\u7684\u5143\u7d20\u4e0a\u3002\n\n```jsx mdx:preview&bg=#fff&toolbar=true\nimport React from 'react';\nconst colors = [\n  { name: 'Green', cn: '\u6210\u529f-\u7eff\u8272', color: '#28a745' },\n  { name: 'Blue', cn: '\u4e3b\u8981-\u84dd\u8272', color: '#008EF0' },\n  { name: 'Cyan', cn: '\u4fe1\u606f-\u9752\u8272', color: '#1EABCD' },\n  { name: 'Navy', cn: '\u5bfc\u822a-\u85cf\u9752', color: '#393E48' },\n  { name: 'Yellow', cn: '\u8b66\u544a-\u9ec4\u8272', color: '#ffc107' },\n  { name: 'Orange', cn: '\u63d0\u9192-\u6a59\u8272', color: '#F95C2B' },\n  { name: 'Red', cn: '\u5371\u9669-\u7ea2\u8272', color: '#dc3545' },\n];\nconst styles = {\n  position: 'relative', minWidth: 80,\n  flex: 1, height: 83, color: '#fff', textAlign: 'center',\n  display: 'flex', flexDirection: 'column', justifyContent: 'center',\n};\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div style={{position: 'absolute', top: 3, left: 5, fontSize: 12, color: 'rgba(255, 255, 255, 0.65)'}}>{item.color}</div>\n          <div>{item.name}</div>\n          <div>{item.cn}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;\n```\n\n## \u6781\u7b80\u4e2d\u6027\u8272\n\n\u6781\u7b80\u4e2d\u6027\u8272\u662f\u767d\u8272\u4ece\u7070\u8272\u518d\u5230\u6df1\u7070\u8272\u7684\u4e00\u4e2a\u8fc7\u6e21\u989c\u8272\uff0c\u53ef\u4ee5\u642d\u914d\u6587\u5b57\u4ee5\u53ca\u4efb\u4f55\u5143\u7d20\uff0c\u4ee5\u8fd9\u79cd\u8272\u8c03\u6765\u7f13\u89e3\u89c6\u89c9\u75b2\u52b3\uff0c\u4f4e\u8c03\u5185\u655b\uff01\n\n```jsx mdx:preview&bg=#fff&toolbar=true\nimport React from 'react';\nconst colors = [\n  { name: '\u767d\u8272', color: '#FFFFFF', fontColor: '#6F6F6F' },\n  { name: '\u80cc\u666f', color: '#F6F6F6', fontColor: '#6F6F6F' },\n  { name: '\u5206\u5272\u7ebf', color: '#F2F2F2', fontColor: '#6F6F6F' },\n  { name: '\u8fb9\u6846', color: '#EEEEEE', fontColor: '#6F6F6F' },\n  { name: '\u5931\u6548', color: '#EAEAEA', fontColor: '#6F6F6F' },\n  { name: '\u8f85\u52a9', color: '#DDDDDD', fontColor: '#6F6F6F' },\n  { name: '\u6b63\u6587', color: '#C2C2C2' },\n  { name: '\u56fe\u6807', color: '#B9B9B9' },\n  { name: '\u6587\u672c', color: '#A5A5A5' },\n  { name: '\u6807\u9898', color: '#6E6E6E' },\n];\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      const styles = {\n        flex: 1, height: 63, color: '#fff', textAlign: 'center', minWidth: 80,\n        flexDirection: 'column', display: 'flex', justifyContent: 'center',\n      }\n      if (item.fontColor) {\n        styles.color = item.fontColor;\n      }\n      return (\n        <div key={idx} style={{ background: item.color, ...styles }}>\n          <div>{item.name}</div>\n          <div>{item.color}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;\n```\n\n## \u80cc\u666f\u8272\n\n\u8fd9\u5185\u7f6e\u7684\u51e0\u79cd\u989c\u8272\u53ef\u4ee5\u7528\u4e8e\u5404\u79cd\u5143\u7d20\u4e2d\uff0c\u6bd4\u5982\uff1a\u5bfc\u822a\uff0c\u6309\u94ae\uff0c\u5fbd\u7ae0\u7b49\u80cc\u666f\u4e2d\u3002\n\n```jsx mdx:preview&bg=#fff&toolbar=true\nimport React from 'react';\n\nconst colors = [\n  { name: '\u8b66\u544a-\u9ec4\u8272', backgroundColor: '#ffc107', des: 'warning', },\n  { name: '\u63d0\u9192-\u6a59\u8272', backgroundColor: '#F95C2B', des: 'remind', },\n  { name: '\u5371\u9669-\u7ea2\u8272', backgroundColor: '#dc3545', des: 'danger', },\n  { name: '\u5bfc\u822a-\u85cf\u9752', backgroundColor: '#393E48', des: 'NavMenu', },\n  { name: '\u4e3b\u8981-\u84dd\u8272', backgroundColor: '#2EA3F4', des: 'Primary', },\n  { name: '\u6210\u529f-\u7eff\u8272', backgroundColor: '#09C62C', des: 'success', },\n  { name: '\u80cc\u666f-\u4e2d\u7070', backgroundColor: '#EAEAEA', des: 'background', color: '#6F6F6F' },\n];\nconst Demo = () => (\n  <div style={{display: 'flex', flexWrap: 'wrap'}}>\n    {colors.map((item, idx) => {\n      const styles = {\n        padding: '21px 0 7px 5px', minWidth: 100,\n        position: 'relative', flex: 1, height: 63, color: '#fff',\n        flexDirection: 'column', display: 'flex', justifyContent: 'center',\n      }\n      const colorFontSty = {position: 'absolute', top: 3, left: 5, fontSize: 12, color: 'rgba(255, 255, 255, 0.65)'};\n      if (item.color) {\n        styles.color = item.color;\n        colorFontSty.color = item.color;\n      }\n      return (\n        <div key={idx} style={{ background: item.backgroundColor, ...styles }}>\n          <div style={colorFontSty}>{item.backgroundColor}</div>\n          <div>{item.name}</div>\n          <div style={{ fontSize: 12 }}>{item.des}</div>\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default Demo;\n```\n",headings:[],headingsList:[]};var o=t(5301),i=t(4760);function l(){return(0,i.jsx)(o.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/website/src/routes/components/colors/README.md"})}}}]);
//# sourceMappingURL=3588.40e7d1bc.chunk.js.map