@uiw/doc
Version:
UIW documentation website.
2 lines • 45.6 kB
JavaScript
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[968],{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,n)=>{"use strict";n.d(t,{Z:()=>p});var r=n(8573),i=n(6320),o=n(8563),u=n(7622),a=n(7937);const l={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var s=n(4760);function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,s.jsxs)("div",{className:l.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,s.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,s.jsx)("br",{}),(0,s.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,s.jsx)(a.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,s.jsx)(a.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,s.jsx)(a.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,s.jsx)(a.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,s.jsx)(a.Divider,{type:"vertical"}),(0,s.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=i.ZP.Preview,m=i.ZP.Code,f=i.ZP.Toolbar,_=e=>{var t,n;let{node:u,components:a,data:l,...c}=e;const _=(0,r.useRef)(null),{headings:p,headingsList:v,...E}=c;(0,r.useEffect)((()=>{if(_.current){const e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]);const h=null===u||void 0===u||null===(t=u.position)||void 0===t?void 0:t.start.line,b=null===u||void 0===u||null===(n=u.data)||void 0===n?void 0:n.meta,L=(0,o.Mx)(b)||String(h),y=a["".concat(L)];if(L&&"function"===typeof y){const e=l[L].value||"",t=(0,o.aE)(b||"");return(0,s.jsxs)(i.ZP,{ref:_,children:[(0,s.jsx)(d,{style:{background:t.bg||"transparent"},children:(0,s.jsx)(y,{})}),(0,s.jsx)(f,{text:e,children:t.title||"Example"}),(0,s.jsx)(m,{children:(0,s.jsx)("pre",{...E})})]})}return(0,s.jsx)("code",{...E})};function p(e){return(0,s.jsxs)(r.Fragment,{children:[(0,s.jsx)(u.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,s.jsx)(_,{...e,...t})}}),(0,s.jsx)(c,{path:e.path})]})}},1962:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>u});const r={components:{23:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var i=['"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',"\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af","\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86"];return function(){return t.default.createElement("div",null,t.default.createElement(r.List,{header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8")},t.default.createElement(r.List.Item,null,'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'),t.default.createElement(r.List.Item,null,"\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af"),t.default.createElement(r.List.Item,null,"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86")),t.default.createElement("h4",{style:{margin:"16px 10px"}},"\u9ed8\u8ba4\u5c3a\u5bf8\uff0c\u6ca1\u6709\u5934\u90e8\u548c\u5c3e\u90e8"),t.default.createElement(r.List,{dataSource:i,noHover:!0,renderItem:function(e){return t.default.createElement(r.List.Item,null,e)}}),t.default.createElement("h4",{style:{margin:"16px 10px"}},"\u5c0f\u5c3a\u5bf8"),t.default.createElement(r.List,{size:"small",header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:i,renderItem:function(e){return t.default.createElement(r.List.Item,null,e)}}),t.default.createElement("h4",{style:{margin:"16px 10px"}},"\u5927\u5c3a\u5bf8"),t.default.createElement(r.List,{size:"large",header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:i,renderItem:function(e){return t.default.createElement(r.List.Item,null,e)}}))}}(),71:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var i=['"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',"\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af",t.default.createElement("span",null,"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86")];return function(){return t.default.createElement(r.List,{header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:i,renderItem:function(e){return t.default.createElement(r.List.Item,null,e)}})}}(),95:function(){function e(t){return e="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},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},i=n(7937);function o(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,a(r.key),r)}}function a(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var i=r.call(t,n||"default");if("object"!==e(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function s(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,i=c(t);if(n){var o=c(this).constructor;r=Reflect.construct(i,arguments,o)}else r=i.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function c(e){return c=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},c(e)}var d=[{content:'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'},{content:"\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af"},{disabled:!0,content:"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86"}],m=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(m,e);var t,n,a,c=s(m);function m(){return o(this,m),c.apply(this,arguments)}return t=m,(n=[{key:"onClick",value:function(e,t,n){n.stopPropagation(),console.log("item",e,n)}},{key:"render",value:function(){var e=this;return r.default.createElement(i.List,{header:r.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:r.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:d,renderItem:function(t,n){return r.default.createElement(i.List.Item,{onClick:e.onClick.bind(e,t,n),disabled:t.disabled},t.content)}})}}])&&u(t.prototype,n),a&&u(t,a),Object.defineProperty(t,"prototype",{writable:!1}),m}(r.default.Component);return m}(),140:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.List,{size:"small",header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8")},t.default.createElement(r.List.Item,{active:!0},'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'),t.default.createElement(r.List.Item,null,"\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af"),t.default.createElement(r.List.Item,null,"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86"))}}(),156:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var i=["\u4eba\u603b\u662f\u5728\u63a5\u8fd1\u5e78\u798f\u65f6\u500d\u611f\u5e78\u798f\uff0c\u5728\u5e78\u798f\u8fdb\u884c\u65f6\u5374\u60a3\u5f97\u60a3\u5931\u3002","\u56e0\u4e3a\u7231\u8fc7\uff0c\u6240\u4ee5\u6148\u60b2\uff1b\u56e0\u4e3a\u61c2\u5f97\uff0c\u6240\u4ee5\u5bbd\u5bb9\u3002","\u4f60\u5982\u679c\u8ba4\u8bc6\u4ece\u524d\u7684\u6211\uff0c\u4e5f\u8bb8\u4f60\u4f1a\u539f\u8c05\u73b0\u5728\u7684\u6211\u3002",t.default.createElement("span",null,"\u4f60\u8fd8\u4e0d\u6765\uff0c\u6211\u600e\u6562\u8001\u53bb\u3002")];return function(){return t.default.createElement(r.List,{dataSource:i,striped:!0,size:"small",renderItem:function(e){return t.default.createElement(r.List.Item,null,e)}})}}(),183:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var i=[{href:"#/components",content:'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'},{target:"_blank",href:"https://uiwjs.github.io/icons/",content:"\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03"},{href:"#/components",disabled:!0,content:"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86"}];return function(){return t.default.createElement(r.List,{header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:i,renderItem:function(e,n){return t.default.createElement(r.List.Item,e,e.content)}})}}(),225:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var i=[{extra:"\u5185\u5bb9",content:'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'},{extra:"\u5185\u5bb9",content:"\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03"},{href:"#/components",disabled:!0,extra:"\u5185\u5bb9",content:"\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86"}];return function(){return t.default.createElement(r.List,{header:t.default.createElement("div",null,"\u5217\u8868\u5934\u90e8"),footer:t.default.createElement("div",null,"\u5217\u8868\u5c3e\u90e8"),dataSource:i,renderItem:function(e,n){return t.default.createElement(r.List.Item,e,e.content)}})}}()},data:{23:{name:23,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar data = [\'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138\', \'\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af\', \'\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86\'];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, "\\"X\\u6218\\u8B66\\u65B0\\u53D8\\u79CD\\u4EBA\\"\\u9996\\u66DD\\u6D77\\u62A5\\u7279\\u5199\\u8BE1\\u5F02\\u4EBA\\u8138"), /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, "\\u516D\\u5927\\u53D8\\u4E94\\u5927\\uFF1F\\u4F20\\u8FEA\\u58EB\\u5C3C600\\u4EBF\\u6536\\u8D2D\\u798F\\u65AF"), /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, "\\u5FEB\\u8DD1!\\u300A\\u4F8F\\u7F57\\u7EAA\\u4E16\\u754C2\\u300B\\u6B63\\u5F0F\\u9884\\u544A\\u8981\\u6765\\u4E86")), /*#__PURE__*/_react["default"].createElement("h4", {\n style: {\n margin: \'16px 10px\'\n }\n }, "\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\uFF0C\\u6CA1\\u6709\\u5934\\u90E8\\u548C\\u5C3E\\u90E8"), /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n dataSource: data,\n noHover: true,\n renderItem: function renderItem(item) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, item);\n }\n }), /*#__PURE__*/_react["default"].createElement("h4", {\n style: {\n margin: \'16px 10px\'\n }\n }, "\\u5C0F\\u5C3A\\u5BF8"), /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n size: "small",\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8"),\n dataSource: data,\n renderItem: function renderItem(item) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, item);\n }\n }), /*#__PURE__*/_react["default"].createElement("h4", {\n style: {\n margin: \'16px 10px\'\n }\n }, "\\u5927\\u5C3A\\u5BF8"), /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n size: "large",\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8"),\n dataSource: data,\n renderItem: function renderItem(item) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, item);\n }\n }));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86',\n];\nconst Demo = () => (\n <div>\n <List header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n <List.Item>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n </List>\n <h4 style={{ margin: '16px 10px' }}>\u9ed8\u8ba4\u5c3a\u5bf8\uff0c\u6ca1\u6709\u5934\u90e8\u548c\u5c3e\u90e8</h4>\n <List\n dataSource={data}\n noHover\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n <h4 style={{ margin: '16px 10px' }}>\u5c0f\u5c3a\u5bf8</h4>\n <List\n size=\"small\"\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n <h4 style={{ margin: '16px 10px' }}>\u5927\u5c3a\u5bf8</h4>\n <List\n size=\"large\"\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n </div>\n)\nexport default Demo"},71:{name:71,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar data = [\'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138\', \'\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af\', /*#__PURE__*/_react["default"].createElement("span", null, "\\u5FEB\\u8DD1!\\u300A\\u4F8F\\u7F57\\u7EAA\\u4E16\\u754C2\\u300B\\u6B63\\u5F0F\\u9884\\u544A\\u8981\\u6765\\u4E86")];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8"),\n dataSource: data,\n renderItem: function renderItem(item) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, item);\n }\n });\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n <span>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</span>,\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => {\n return (<List.Item>{item}</List.Item>);\n }}\n />\n)\nexport default Demo"},95:{name:95,meta:{},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar data = [{\n \'content\': \'"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138\'\n}, {\n \'content\': \'\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af\'\n}, {\n \'disabled\': true,\n \'content\': \'\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86\'\n}];\nvar Demo = /*#__PURE__*/function (_React$Component) {\n _inherits(Demo, _React$Component);\n var _super = _createSuper(Demo);\n function Demo() {\n _classCallCheck(this, Demo);\n return _super.apply(this, arguments);\n }\n _createClass(Demo, [{\n key: "onClick",\n value: function onClick(item, index, e) {\n e.stopPropagation();\n console.log(\'item\', item, e);\n }\n }, {\n key: "render",\n value: function render() {\n var _this = this;\n return /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8"),\n dataSource: data,\n renderItem: function renderItem(item, index) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, {\n onClick: _this.onClick.bind(_this, item, index),\n disabled: item.disabled\n }, item.content);\n }\n });\n }\n }]);\n return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'content': '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af'\n },\n {\n 'disabled': true,\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nclass Demo extends React.Component {\n onClick(item,index,e){\n e.stopPropagation();\n console.log('item',item,e);\n }\n render() {\n return (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item,index) => {\n return (\n <List.Item onClick={this.onClick.bind(this, item, index)} disabled={item.disabled}>\n {item.content}\n </List.Item>\n );\n }}\n />\n )\n }\n}\nexport default Demo"},140:{name:140,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n size: "small",\n header: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5934\\u90E8"),\n footer: /*#__PURE__*/_react["default"].createElement("div", null, "\\u5217\\u8868\\u5C3E\\u90E8")\n }, /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, {\n active: true\n }, "\\"X\\u6218\\u8B66\\u65B0\\u53D8\\u79CD\\u4EBA\\"\\u9996\\u66DD\\u6D77\\u62A5\\u7279\\u5199\\u8BE1\\u5F02\\u4EBA\\u8138"), /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, "\\u516D\\u5927\\u53D8\\u4E94\\u5927\\uFF1F\\u4F20\\u8FEA\\u58EB\\u5C3C600\\u4EBF\\u6536\\u8D2D\\u798F\\u65AF"), /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, "\\u5FEB\\u8DD1!\\u300A\\u4F8F\\u7F57\\u7EAA\\u4E16\\u754C2\\u300B\\u6B63\\u5F0F\\u9884\\u544A\\u8981\\u6765\\u4E86"));\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst Demo = () => (\n <List size=\"small\" header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n <List.Item active>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n </List>\n)\nexport default Demo"},156:{name:156,meta:{},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar data = [\'\u4eba\u603b\u662f\u5728\u63a5\u8fd1\u5e78\u798f\u65f6\u500d\u611f\u5e78\u798f\uff0c\u5728\u5e78\u798f\u8fdb\u884c\u65f6\u5374\u60a3\u5f97\u60a3\u5931\u3002\', \'\u56e0\u4e3a\u7231\u8fc7\uff0c\u6240\u4ee5\u6148\u60b2\uff1b\u56e0\u4e3a\u61c2\u5f97\uff0c\u6240\u4ee5\u5bbd\u5bb9\u3002\', \'\u4f60\u5982\u679c\u8ba4\u8bc6\u4ece\u524d\u7684\u6211\uff0c\u4e5f\u8bb8\u4f60\u4f1a\u539f\u8c05\u73b0\u5728\u7684\u6211\u3002\', /*#__PURE__*/_react["default"].createElement("span", null, "\\u4F60\\u8FD8\\u4E0D\\u6765\\uFF0C\\u6211\\u600E\\u6562\\u8001\\u53BB\\u3002")];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List, {\n dataSource: data,\n striped: true,\n size: "small",\n renderItem: function renderItem(item) {\n return /*#__PURE__*/_react["default"].createElement(_uiw.List.Item, null, item);\n }\n });\n};\nreturn Demo;',language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\u4eba\u603b\u662f\u5728\u63a5\u8fd1\u5e78\u798f\u65f6\u500d\u611f\u5e78\u798f\uff0c\u5728\u5e78\u798f\u8fdb\u884c\u65f6\u5374\u60a3\u5f97\u60a3\u5931\u3002',\n '\u56e0\u4e3a\u7231\u8fc7\uff0c\u6240\u4ee5\u6148\u60b2\uff1b\u56e0\u4e3a\u61c2\u5f97\uff0c\u6240\u4ee5\u5bbd\u5bb9\u3002',\n '\u4f60\u5982\u679c\u8ba4\u8bc6\u4ece\u524d\u7684\u6211\uff0c\u4e5f\u8bb8\u4f60\u4f1a\u539f\u8c05\u73b0\u5728\u7684\u6211\u3002',\n <span>\u4f60\u8fd8\u4e0d\u6765\uff0c\u6211\u600e\u6562\u8001\u53bb\u3002</span>,\n];\nconst Demo = () => (\n <List\n dataSource={data}\n striped={true}\n size=\"small\"\n renderItem={item => {\n return (<List.Item>{item}</List.Item>);\n }}\n />\n)\nexport default Demo"},183:{name:183,meta:{},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar data = [{\n 'href': '#/components',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n}, {\n 'target': '_blank',\n 'href': 'https://uiwjs.github.io/icons/',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n}, {\n 'href': '#/components',\n 'disabled': true,\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.List, {\n header: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u5217\\u8868\\u5934\\u90E8\"),\n footer: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u5217\\u8868\\u5C3E\\u90E8\"),\n dataSource: data,\n renderItem: function renderItem(item, index) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.List.Item, item, item.content);\n }\n });\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'href':'#/components',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'target':'_blank',\n 'href':'https://uiwjs.github.io/icons/',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n },\n {\n 'href':'#/components',\n 'disabled': true,\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item, index) => {\n return (\n <List.Item {...item}>\n {item.content}\n </List.Item>\n );\n }}\n />\n)\nexport default Demo"},225:{name:225,meta:{},code:"\"use strict\";\n\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _uiw = require(\"uiw\");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\nvar data = [{\n 'extra': '\u5185\u5bb9',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n}, {\n 'extra': '\u5185\u5bb9',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n}, {\n 'href': '#/components',\n 'disabled': true,\n 'extra': '\u5185\u5bb9',\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n}];\nvar Demo = function Demo() {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.List, {\n header: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u5217\\u8868\\u5934\\u90E8\"),\n footer: /*#__PURE__*/_react[\"default\"].createElement(\"div\", null, \"\\u5217\\u8868\\u5C3E\\u90E8\"),\n dataSource: data,\n renderItem: function renderItem(item, index) {\n return /*#__PURE__*/_react[\"default\"].createElement(_uiw.List.Item, item, item.content);\n }\n });\n};\nreturn Demo;",language:"jsx",value:"import React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'extra': '\u5185\u5bb9',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'extra': '\u5185\u5bb9',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n },\n {\n 'href':'#/components',\n 'disabled': true,\n 'extra': '\u5185\u5bb9',\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item, index) => {\n return (\n <List.Item {...item}>\n {item.content}\n </List.Item>\n );\n }}\n />\n)\nexport default Demo"}},source:"List \u5217\u8868\n===\n\n[](https://jaywcjlove.github.io/#/sponsor)\n[](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-list/file/README.md)\n[](https://www.npmjs.com/package/@uiw/react-list)\n[](https://npmjs.com/@uiw/react-list)\n\n\u5217\u8868\u7ec4\u4ef6\n\n```jsx\nimport { List } from 'uiw';\nimport { ListItem } from 'uiw'; // @ v4.10.0+\n// or\nimport List from '@uiw/react-list';\nimport List, { ListItem } from '@uiw/react-list'; // @ v4.10.0+\n\n// List.Item === ListItem\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86',\n];\nconst Demo = () => (\n <div>\n <List header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n <List.Item>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n </List>\n <h4 style={{ margin: '16px 10px' }}>\u9ed8\u8ba4\u5c3a\u5bf8\uff0c\u6ca1\u6709\u5934\u90e8\u548c\u5c3e\u90e8</h4>\n <List\n dataSource={data}\n noHover\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n <h4 style={{ margin: '16px 10px' }}>\u5c0f\u5c3a\u5bf8</h4>\n <List\n size=\"small\"\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n <h4 style={{ margin: '16px 10px' }}>\u5927\u5c3a\u5bf8</h4>\n <List\n size=\"large\"\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => (<List.Item>{item}</List.Item>)}\n />\n </div>\n)\nexport default Demo\n```\n\n\n### \u7279\u6b8a\u65b9\u6cd5\n\n\u901a\u8fc7`dataSource`\u548c`renderItem`\u6765\u521b\u5efa\u5217\u8868\uff0c\u8fd9\u4e24\u4e2a\u5c5e\u6027\u662f\u4e00\u8d77\u4f7f\u7528\u3002\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138',\n '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af',\n <span>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</span>,\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={item => {\n return (<List.Item>{item}</List.Item>);\n }}\n />\n)\nexport default Demo\n```\n\n### \u7981\u7528\u884c\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'content': '\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af'\n },\n {\n 'disabled': true,\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nclass Demo extends React.Component {\n onClick(item,index,e){\n e.stopPropagation();\n console.log('item',item,e);\n }\n render() {\n return (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item,index) => {\n return (\n <List.Item onClick={this.onClick.bind(this, item, index)} disabled={item.disabled}>\n {item.content}\n </List.Item>\n );\n }}\n />\n )\n }\n}\nexport default Demo\n```\n\n### \u884c\u6fc0\u6d3b\n\n`List.Item` \u8bbe\u7f6e `active` \u5c5e\u6027\u5373\u53ef\u8bbe\u7f6e\u8fd9\u5f20\u88ab\u6fc0\u6d3b\u7684\u6837\u5f0f\u3002\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst Demo = () => (\n <List size=\"small\" header={<div>\u5217\u8868\u5934\u90e8</div>} footer={<div>\u5217\u8868\u5c3e\u90e8</div>}>\n <List.Item active>\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n <List.Item>\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86</List.Item>\n </List>\n)\nexport default Demo\n```\n\n### \u6591\u9a6c\u7ebf\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n '\u4eba\u603b\u662f\u5728\u63a5\u8fd1\u5e78\u798f\u65f6\u500d\u611f\u5e78\u798f\uff0c\u5728\u5e78\u798f\u8fdb\u884c\u65f6\u5374\u60a3\u5f97\u60a3\u5931\u3002',\n '\u56e0\u4e3a\u7231\u8fc7\uff0c\u6240\u4ee5\u6148\u60b2\uff1b\u56e0\u4e3a\u61c2\u5f97\uff0c\u6240\u4ee5\u5bbd\u5bb9\u3002',\n '\u4f60\u5982\u679c\u8ba4\u8bc6\u4ece\u524d\u7684\u6211\uff0c\u4e5f\u8bb8\u4f60\u4f1a\u539f\u8c05\u73b0\u5728\u7684\u6211\u3002',\n <span>\u4f60\u8fd8\u4e0d\u6765\uff0c\u6211\u600e\u6562\u8001\u53bb\u3002</span>,\n];\nconst Demo = () => (\n <List\n dataSource={data}\n striped={true}\n size=\"small\"\n renderItem={item => {\n return (<List.Item>{item}</List.Item>);\n }}\n />\n)\nexport default Demo\n```\n\n### \u5217\u8868\u4e3a\u8d85\u94fe\u63a5\n\n`List.Item` \u8bbe\u7f6e\u4e86 `href`\uff0c`List.Item`\u5c31\u53ef\u4ee5\u8bbe\u7f6e\u6807\u7b7e`<a>`\u7684\u6240\u6709\u5c5e\u6027\u4e86\u3002\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'href':'#/components',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'target':'_blank',\n 'href':'https://uiwjs.github.io/icons/',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n },\n {\n 'href':'#/components',\n 'disabled': true,\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item, index) => {\n return (\n <List.Item {...item}>\n {item.content}\n </List.Item>\n );\n }}\n />\n)\nexport default Demo\n```\n\n\n### \u5c55\u793a\u989d\u5916\u5185\u5bb9\n\n`List.Item` \u8bbe\u7f6e\u4e86 `extra`\uff0c`List.Item` \u5c31\u53ef\u4ee5\u8bbe\u7f6e\u53f3\u4fa7\u5185\u5bb9\u3002\n\n```jsx mdx:preview\nimport React from 'react';\nimport { List } from 'uiw';\n\nconst data = [\n {\n 'extra': '\u5185\u5bb9',\n 'content': '\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138'\n },\n {\n 'extra': '\u5185\u5bb9',\n 'content': '\u4eceuiw\u7ec4\u4ef6\u5e93\u4e2d\u62bd\u79bb\u51fa\u6765\u7684\uff0c\u56fe\u6807\u5b57\u4f53 uiw-iconfont \u53d1\u5e03'\n },\n {\n 'href':'#/components',\n 'disabled': true,\n 'extra': '\u5185\u5bb9',\n 'content': '\u5feb\u8dd1!\u300a\u4f8f\u7f57\u7eaa\u4e16\u754c2\u300b\u6b63\u5f0f\u9884\u544a\u8981\u6765\u4e86'\n },\n];\nconst Demo = () => (\n <List\n header={<div>\u5217\u8868\u5934\u90e8</div>}\n footer={<div>\u5217\u8868\u5c3e\u90e8</div>}\n dataSource={data}\n renderItem={(item, index) => {\n return (\n <List.Item {...item}>\n {item.content}\n </List.Item>\n );\n }}\n />\n)\nexport default Demo\n```\n\n## List\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| size | \u8bbe\u7f6e\u884c\u5c3a\u5bf8\uff0c\u5206\u522b\u5927\u3001\u4e2d\u3001\u5c0f\u4e09\u79cd\u5c3a\u5bf8 | Enum{`small`,`default`,`large`} | `default` |\n| bordered | \u662f\u5426\u5c55\u793a\u8fb9\u6846 | Boolean | `true` |\n| noHover | \u53d6\u6d88\u9f20\u6807\u79fb\u8fc7\u65f6\u8fb9\u6846\u9634\u5f71 | Boolean | `false` |\n| active | \u6fc0\u6d3b\u5217\u8868\uff0c\u9f20\u6807\u7ecf\u8fc7\u8fb9\u6846\u9634\u5f71\u6548\u679c | Boolean | `false` |\n| striped | \u6591\u9a6c\u7ebf\u6548\u679c | Boolean | `false` |\n| footer | \u5217\u8868\u5e95\u90e8 | String/ReactNode | - |\n| header | \u5217\u8868\u5934\u90e8 | String/ReactNode | - |\n| dataSource | \u5217\u8868\u6570\u636e\u6e90 | Array[] | - |\n| renderItem | \u901a\u8fc7\u56de\u8c03\u51fd\u6570\u8fd4\u56deDome\uff0c\u6e32\u67d3\u5217\u8868\u6bcf\u4e2a\u884c | Function(item,index) | - |\n\n## List.Item\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| --------- | -------- | --------- | -------- |\n| active | \u6fc0\u6d3b | Boolean | `false` |\n| extra | \u989d\u5916\u5185\u5bb9\uff0c\u5c55\u793a\u53f3\u4fa7\u5185\u5bb9 | React.ReactNode | - |\n| disabled | \u7981\u7528 | Boolean | `false` |\n| tagName | \u8bbe\u7f6e\u5b50\u8282\u70b9\u6807\u7b7e\u540d\uff0c\u9ed8\u8ba4 `<div />` \u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u8def\u7531 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String/Link | `div` |\n| href | \u89c4\u5b9a\u94fe\u63a5\u7684\u76ee\u6807\uff0c\u503c\u5b58\u5728\u5e76\u4e14 `tagName` \u4e3a `String` \u65f6\u5019\u662f\u4e2a\u8d85\u94fe\u63a5\uff0c\u5728\u8d85\u94fe\u63a5\u4e0a\u52a0 `href` \u7684\u503c\u5c31\u662f\u4f60\u4f20\u8fdb\u6765\u7684 `href`\u503c\uff0c\u6b64\u65f6\u5c06\u53ef\u4ee5\u8bbe\u7f6e\u6807\u7b7e`<a>`\u7684\u6240\u6709\u5c5e\u6027\u3002 | Boolean/String | `false` |\n\n\u5176\u5b83\u53c2\u6570\u53ef\u6839\u636e tagName \u6765\u8bbe\u7f6e\uff0c\u8bbe\u7f6e `tagName=\"a\"` \u6807\u7b7e\u65f6\uff0c\u53ef\u8bbe\u7f6e `href=\"https://github.com\"` \u6216\u8005 target=\"_blank\" \u7b49\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e react-router-dom \u8def\u7531 `<Link>`\uff0c\u4f8b\u5982\uff1a\n\n```jsx\nimport { List } from 'uiw';\nimport { Link } from 'react-router-dom';\n\nconst Demo = () => {\n return (\n <List>\n <List.Item tagName={Link} to=\"/home\">\"X\u6218\u8b66\u65b0\u53d8\u79cd\u4eba\"\u9996\u66dd\u6d77\u62a5\u7279\u5199\u8be1\u5f02\u4eba\u8138</List.Item>\n <List.Item>\u516d\u5927\u53d8\u4e94\u5927\uff1f\u4f20\u8fea\u58eb\u5c3c600\u4ebf\u6536\u8d2d\u798f\u65af</List.Item>\n </List>\n )\n}\n```\n",headings:[],headingsList:[]};var i=n(5301),o=n(4760);function u(){return(0,o.jsx)(i.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-list/README.md"})}}}]);
//# sourceMappingURL=968.51d8674d.chunk.js.map