@uiw/doc
Version:
UIW documentation website.
2 lines • 19.7 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7427],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,r)=>{"use strict";r.d(t,{Z:()=>v});var n=r(8573),a=r(6320),u=r(8563),o=r(7622),i=r(7937);const s={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=r(4760);function l(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,r=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,c.jsxs)("div",{className:s.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",r&&(0,c.jsx)("a",{href:r,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=a.ZP.Preview,f=a.ZP.Code,_=a.ZP.Toolbar,m=e=>{var t,r;let{node:o,components:i,data:s,...l}=e;const m=(0,n.useRef)(null),{headings:v,headingsList:p,...h}=l;(0,n.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const g=null===o||void 0===o||null===(t=o.position)||void 0===t?void 0:t.start.line,E=null===o||void 0===o||null===(r=o.data)||void 0===r?void 0:r.meta,b=(0,u.Mx)(E)||String(g),A=i["".concat(b)];if(b&&"function"===typeof A){const e=s[b].value||"",t=(0,u.aE)(E||"");return(0,c.jsxs)(a.ZP,{ref:m,children:[(0,c.jsx)(d,{style:{background:t.bg||"transparent"},children:(0,c.jsx)(A,{})}),(0,c.jsx)(_,{text:e,children:t.title||"Example"}),(0,c.jsx)(f,{children:(0,c.jsx)("pre",{...h})})]})}return(0,c.jsx)("code",{...h})};function v(e){return(0,c.jsxs)(n.Fragment,{children:[(0,c.jsx)(o.Z,{className:s.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,c.jsx)(m,{...e,...t})}}),(0,c.jsx)(l,{path:e.path})]})}},5449:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>o});const n={components:{21:function(){var e,t=(e=r(8573))&&e.__esModule?e:{default:e},n=r(7937);return function(){return t.default.createElement("div",null,t.default.createElement("div",{style:{paddingBottom:20}},t.default.createElement(n.Avatar,{size:"large",icon:t.default.createElement(n.Icon,{type:"user"})}),t.default.createElement(n.Avatar,{icon:"user"}),t.default.createElement(n.Avatar,{size:"small",icon:"user"}),t.default.createElement(n.Avatar,{size:"mini",icon:t.default.createElement(n.Icon,{type:"user"})})),t.default.createElement("div",null,t.default.createElement(n.Avatar,{shape:"square",size:"large",icon:"user"}),t.default.createElement(n.Avatar,{shape:"square",icon:"user"}),t.default.createElement(n.Avatar,{shape:"square",size:"small",icon:"user"}),t.default.createElement(n.Avatar,{shape:"square",size:"mini",icon:"user"})))}}(),49:function(){var e,t=(e=r(8573))&&e.__esModule?e:{default:e},n=r(7937);return function(){return t.default.createElement("div",null,t.default.createElement(n.Avatar,{icon:t.default.createElement(n.Icon,{type:"user"})}),t.default.createElement(n.Avatar,null,"U"),t.default.createElement(n.Avatar,{src:"https://avatars2.githubusercontent.com/u/1680273?s=40&v=4"}),t.default.createElement(n.Avatar,{style:{color:"#f56a00",backgroundColor:"#fde3cf"}},"U"),t.default.createElement(n.Avatar,{style:{backgroundColor:"#87d068"},icon:"user"}))}}(),70:function(){var e,t=(e=r(8573))&&e.__esModule?e:{default:e},n=r(7937);function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,u,o,i=[],s=!0,c=!1;try{if(u=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;s=!1}else for(;!(s=(n=u.call(r)).done)&&(i.push(n.value),i.length!==t);s=!0);}catch(e){c=!0,a=e}finally{try{if(!s&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(c)throw a}}return i}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return u(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}return function(){var e=a(t.default.useState("https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4"),2),r=e[0],u=e[1];return t.default.createElement("div",null,t.default.createElement(n.Avatar,{src:"https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4",onError:function(e){return e&&(e.target.src="https://avatars2.githubusercontent.com/u/1680275?s=40&v=4"),!1}}),t.default.createElement(n.Avatar,{src:r,onError:function(e){e&&u("https://avatars2.githubusercontent.com/u/1680275?s=40&v=4")}}))}}(),104:function(){var e,t=(e=r(8573))&&e.__esModule?e:{default:e},n=r(7937);return function(){return t.default.createElement("div",null,t.default.createElement("span",{style:{marginRight:24}},t.default.createElement(n.Badge,{count:1},t.default.createElement(n.Avatar,{shape:"square",icon:"user"}))),t.default.createElement("span",null,t.default.createElement(n.Badge,{dot:!0},t.default.createElement(n.Avatar,{shape:"square",icon:"user"}))))}}()},data:{21:{name:21,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n paddingBottom: 20\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n size: "large",\n icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "user"\n })\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n icon: "user"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n size: "small",\n icon: "user"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n size: "mini",\n icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "user"\n })\n })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n size: "large",\n icon: "user"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n icon: "user"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n size: "small",\n icon: "user"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n size: "mini",\n icon: "user"\n })));\n};',language:"jsx",value:'import React from \'react\';\nimport { Avatar, Icon } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <div style={{ paddingBottom: 20 }}>\n <Avatar size="large" icon={<Icon type="user"/>} />\n <Avatar icon="user" />\n <Avatar size="small" icon="user" />\n <Avatar size="mini" icon={<Icon type="user"/>} />\n </div>\n <div>\n <Avatar shape="square" size="large" icon="user" />\n <Avatar shape="square" icon="user" />\n <Avatar shape="square" size="small" icon="user" />\n <Avatar shape="square" size="mini" icon="user" />\n </div>\n </div>\n )\n}'},49:{name:49,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n icon: /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "user"\n })\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, null, "U"), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n src: "https://avatars2.githubusercontent.com/u/1680273?s=40&v=4"\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n style: {\n color: \'#f56a00\',\n backgroundColor: \'#fde3cf\'\n }\n }, "U"), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n style: {\n backgroundColor: \'#87d068\'\n },\n icon: "user"\n }));\n};',language:"jsx",value:"import React from 'react';\nimport { Avatar, Icon } from 'uiw';\n\nexport default function Demo() {\n return (\n <div>\n <Avatar icon={<Icon type=\"user\"/>} />\n <Avatar>U</Avatar>\n <Avatar src=\"https://avatars2.githubusercontent.com/u/1680273?s=40&v=4\" />\n <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>\n <Avatar style={{ backgroundColor: '#87d068' }} icon=\"user\" />\n </div>\n )\n}"},70:{name:70,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nvar App = function App() {\n var _React$useState = _react["default"].useState(\'https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4\'),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n src = _React$useState2[0],\n setSrc = _React$useState2[1];\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n src: "https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4",\n onError: function onError(e) {\n if (e) {\n e.target.src = \'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4\';\n }\n return false;\n }\n }), /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n src: src,\n onError: function onError(e) {\n if (e) {\n setSrc(\'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4\');\n }\n }\n }));\n};\nreturn App;',language:"jsx",value:"import React from 'react';\nimport { Avatar, Icon } from 'uiw';\n\nconst App = () => {\n const [src, setSrc] = React.useState('https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4')\n return (\n <div>\n <Avatar\n src='https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4'\n onError={(e) => {\n if (e) {\n e.target.src = 'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4'\n }\n return false;\n }}\n />\n <Avatar\n src={src}\n onError={(e) => {\n if (e) {\n setSrc('https://avatars2.githubusercontent.com/u/1680275?s=40&v=4');\n }\n }}\n />\n </div>\n )\n}\n\nexport default App;"},104:{name:104,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {\n style: {\n marginRight: 24\n }\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Badge, {\n count: 1\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n icon: "user"\n }))), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_uiw.Badge, {\n dot: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Avatar, {\n shape: "square",\n icon: "user"\n }))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Avatar, Badge } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <span style={{ marginRight: 24 }}>\n <Badge count={1}><Avatar shape="square" icon="user" /></Badge>\n </span>\n <span>\n <Badge dot><Avatar shape="square" icon="user" /></Badge>\n </span>\n </div>\n )\n}'}},source:'Avatar \u5934\u50cf\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-avatar/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-avatar)\n[](https://npmjs.com/@uiw/react-avatar)\n\n\u7528\u6765\u4ee3\u8868\u7528\u6237\u6216\u4e8b\u7269\uff0c\u652f\u6301\u56fe\u7247\u3001\u56fe\u6807\u6216\u5b57\u7b26\u5c55\u793a\u3002\n\n```jsx\nimport { Avatar } from \'uiw\';\n// or\nimport Avatar from \'@uiw/react-avatar\';\n```\n\n## \u57fa\u672c\u7528\u6cd5\n\n\u5934\u50cf\u6709\u56db\u79cd\u5c3a\u5bf8\uff0c\u4e24\u79cd\u5f62\u72b6\u53ef\u9009\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Avatar, Icon } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <div style={{ paddingBottom: 20 }}>\n <Avatar size="large" icon={<Icon type="user"/>} />\n <Avatar icon="user" />\n <Avatar size="small" icon="user" />\n <Avatar size="mini" icon={<Icon type="user"/>} />\n </div>\n <div>\n <Avatar shape="square" size="large" icon="user" />\n <Avatar shape="square" icon="user" />\n <Avatar shape="square" size="small" icon="user" />\n <Avatar shape="square" size="mini" icon="user" />\n </div>\n </div>\n )\n}\n```\n\n## \u5176\u5b83\u7c7b\u578b\n\n\u652f\u6301\u4e09\u79cd\u7c7b\u578b\uff1aIcon \u4ee5\u53ca\u5b57\u7b26\uff0c\u5176\u4e2d Icon \u548c\u5b57\u7b26\u578b\u53ef\u4ee5\u81ea\u5b9a\u4e49\u56fe\u6807\u989c\u8272\u53ca\u80cc\u666f\u8272\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Avatar, Icon } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <Avatar icon={<Icon type="user"/>} />\n <Avatar>U</Avatar>\n <Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />\n <Avatar style={{ color: \'#f56a00\', backgroundColor: \'#fde3cf\' }}>U</Avatar>\n <Avatar style={{ backgroundColor: \'#87d068\' }} icon="user" />\n </div>\n )\n}\n```\n\n## \u56fe\u7247\u652f\u6301\n\n\u5728\u7ec4\u4ef6\u4e0a\u4f7f\u7528`onError`\u4e8b\u4ef6\uff0c\u5904\u7406\u663e\u793a\u9519\u8bef\u7684\u56fe\u7247\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Avatar, Icon } from \'uiw\';\n\nconst App = () => {\n const [src, setSrc] = React.useState(\'https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4\')\n return (\n <div>\n <Avatar\n src=\'https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4\'\n onError={(e) => {\n if (e) {\n e.target.src = \'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4\'\n }\n return false;\n }}\n />\n <Avatar\n src={src}\n onError={(e) => {\n if (e) {\n setSrc(\'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4\');\n }\n }}\n />\n </div>\n )\n}\n\nexport default App;\n```\n\n## \u5e26\u5fbd\u6807\u7684\u5934\u50cf\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Avatar, Badge } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <span style={{ marginRight: 24 }}>\n <Badge count={1}><Avatar shape="square" icon="user" /></Badge>\n </span>\n <span>\n <Badge dot><Avatar shape="square" icon="user" /></Badge>\n </span>\n </div>\n )\n}\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u8bbe\u7f6e\u5934\u50cf\u7684\u56fe\u6807\u7c7b\u578b\uff0c\u53c2\u8003 Icon \u7ec4\u4ef6 | String\u3001ReactNode | - |\n| shape | \u6307\u5b9a\u5934\u50cf\u7684\u5f62\u72b6 `square` \u6b63\u65b9\u5f62\u6216\u8005 `circle` \u5706\t | Enum{\'`circle`\', \'`square`\' } | - |\n| size | \u8bbe\u7f6e\u5934\u50cf\u7684\u5927\u5c0f | Enum{ \'`large`\', \'`small`\',\'`mini`\', \'`default`\' } | `default` |\n| src | \u56fe\u7247\u7c7b\u5934\u50cf\u7684\u8d44\u6e90\u5730\u5740 | String | - |\n| alt | \u89c4\u5b9a\u56fe\u50cf\u7684\u66ff\u4ee3\u6587\u672c | String | - |\n| onError | \u56fe\u7247\u52a0\u8f7d\u5931\u8d25\u7684\u4e8b\u4ef6\uff0c\u8fd4\u56de false \u4f1a\u5173\u95ed\u7ec4\u4ef6\u9ed8\u8ba4\u7684 fallback \u884c\u4e3a | () => boolean | - |\n',headings:[],headingsList:[]};var a=r(5301),u=r(4760);function o(){return(0,u.jsx)(a.Z,{...n,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-avatar/README.md"})}}}]);
//# sourceMappingURL=7427.98eb3718.chunk.js.map