UNPKG

@uiw/doc

Version:

UIW documentation website.

2 lines 21.5 kB
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8386],{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),a=n(6320),i=n(8563),u=n(7622),l=n(7937);const o={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var d=n(4760);function s(){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,d.jsxs)("div",{className:o.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,d.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,d.jsx)("br",{}),(0,d.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,d.jsx)(l.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,d.jsx)(l.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,d.jsx)(l.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,d.jsx)(l.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,d.jsx)(l.Divider,{type:"vertical"}),(0,d.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const c=a.ZP.Preview,m=a.ZP.Code,f=a.ZP.Toolbar,_=e=>{var t,n;let{node:u,components:l,data:o,...s}=e;const _=(0,r.useRef)(null),{headings:p,headingsList:h,...b}=s;(0,r.useEffect)((()=>{if(_.current){const e=_.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(_.current,e)}}),[_]);const g=null===u||void 0===u||null===(t=u.position)||void 0===t?void 0:t.start.line,w=null===u||void 0===u||null===(n=u.data)||void 0===n?void 0:n.meta,v=(0,i.Mx)(w)||String(g),E=l["".concat(v)];if(v&&"function"===typeof E){const e=o[v].value||"",t=(0,i.aE)(w||"");return(0,d.jsxs)(a.ZP,{ref:_,children:[(0,d.jsx)(c,{style:{background:t.bg||"transparent"},children:(0,d.jsx)(E,{})}),(0,d.jsx)(f,{text:e,children:t.title||"Example"}),(0,d.jsx)(m,{children:(0,d.jsx)("pre",{...b})})]})}return(0,d.jsx)("code",{...b})};function p(e){return(0,d.jsxs)(r.Fragment,{children:[(0,d.jsx)(u.Z,{className:o.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,d.jsx)(_,{...e,...t})}}),(0,d.jsx)(s,{path:e.path})]})}},3282:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>u});const r={components:{21:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement("div",null,t.default.createElement(r.Card,{title:"Card\u6807\u9898",extra:t.default.createElement("a",{href:"#"},"\u66f4\u591a"),style:{width:300}},"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null)))}}(),42:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Card,{title:"Card\u6807\u9898",bordered:!1,style:{width:300}},"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null))}}(),61:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);return function(){return t.default.createElement(r.Card,{style:{width:300}},"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null),"\u5361\u7247\u5185\u5bb9",t.default.createElement("br",null))}}(),80:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var a={padding:"10px 16px"};return function(){return t.default.createElement(r.Card,{style:{width:240},bodyStyle:{padding:10}},t.default.createElement("div",null,t.default.createElement("img",{alt:"example",width:"100%",src:"https://avatars1.githubusercontent.com/u/1680273?v=4"})),t.default.createElement("div",{style:a},t.default.createElement("h3",{style:{margin:0}},"\u6211\u7231\u6f02\u4eae\u59b9\u59b9"),t.default.createElement("p",{style:{margin:0}},t.default.createElement("a",{href:"https://uiwjs.github.io"},"https://uiwjs.github.io"))))}}(),103:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var a=t.default.createElement("a",{href:"https://uiwjs.github.io"},t.default.createElement(r.Icon,{type:"user"}),"\xa0 16 Friends");return function(){return t.default.createElement(r.Card,{title:"Card\u6807\u9898",footer:a,style:{width:240},bodyStyle:{padding:0}},t.default.createElement("div",null,t.default.createElement("img",{alt:"example",width:"100%",src:"https://avatars1.githubusercontent.com/u/1680273?v=4"})),t.default.createElement("div",{style:{padding:"10px 16px"}},t.default.createElement("h3",{style:{margin:0}},"\u6211\u7231\u6f02\u4eae\u59b9\u59b9"),t.default.createElement("p",{style:{margin:0}},t.default.createElement("a",{href:"https://uiwjs.github.io"},"https://uiwjs.github.io"))))}}(),138:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var a=t.default.createElement("a",{href:"https://uiwjs.github.io"},t.default.createElement(r.Icon,{type:"user"}),"\xa0 16 Friends");return function(){return t.default.createElement(r.Card,{active:!0,title:"Card\u6807\u9898",footer:a,style:{width:240},bodyStyle:{padding:0}},t.default.createElement("div",null,t.default.createElement("img",{alt:"example",width:"100%",src:"https://avatars1.githubusercontent.com/u/1680273?v=4"})),t.default.createElement("div",{style:{padding:"10px 16px"}},t.default.createElement("h3",{style:{margin:0}},"\u6211\u7231\u6f02\u4eae\u59b9\u59b9"),t.default.createElement("p",{style:{margin:0}},t.default.createElement("a",{href:"https://uiwjs.github.io"},"https://uiwjs.github.io"))))}}()},data:{21:{name:21,meta:{bg:"#fff"},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.Card, {\n title: "Card\\u6807\\u9898",\n extra: /*#__PURE__*/_react["default"].createElement("a", {\n href: "#"\n }, "\\u66F4\\u591A"),\n style: {\n width: 300\n }\n }, "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null)));\n};',language:"jsx",value:"import React from 'react';\nimport { Card } from 'uiw';\n\nexport default function Demo() {\n return(\n <div>\n <Card title=\"Card\u6807\u9898\" extra={<a href=\"#\">\u66f4\u591a</a>} style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n </div>\n )\n}"},42:{name:42,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(_uiw.Card, {\n title: "Card\\u6807\\u9898",\n bordered: false,\n style: {\n width: 300\n }\n }, "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null));\n};',language:"jsx",value:"import React from 'react';\nimport { Card } from 'uiw';\n\nexport default function Demo() {\n return(\n <Card title=\"Card\u6807\u9898\" bordered={false} style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n )\n}"},61:{name:61,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(_uiw.Card, {\n style: {\n width: 300\n }\n }, "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null), "\\u5361\\u7247\\u5185\\u5BB9", /*#__PURE__*/_react["default"].createElement("br", null));\n};',language:"jsx",value:"import React from 'react';\nimport { Card } from 'uiw';\n\nexport default function Demo() {\n return(\n <Card style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n )\n}"},80:{name:80,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 titleStyle = {\n padding: "10px 16px"\n};\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n style: {\n width: 240\n },\n bodyStyle: {\n padding: 10\n }\n }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {\n alt: "example",\n width: "100%",\n src: "https://avatars1.githubusercontent.com/u/1680273?v=4"\n })), /*#__PURE__*/_react["default"].createElement("div", {\n style: titleStyle\n }, /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n margin: 0\n }\n }, "\\u6211\\u7231\\u6F02\\u4EAE\\u59B9\\u59B9"), /*#__PURE__*/_react["default"].createElement("p", {\n style: {\n margin: 0\n }\n }, /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://uiwjs.github.io"\n }, "https://uiwjs.github.io"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Card } from \'uiw\';\n\nlet titleStyle = { padding: `10px 16px` };\n\nexport default function Demo() {\n return(\n <Card style={{ width: 240 }} bodyStyle={{ padding: 10 }}>\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={titleStyle}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n )\n}'},103:{name:103,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 footer = /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://uiwjs.github.io"\n}, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "user"\n}), "\\xA0 16 Friends");\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n title: "Card\\u6807\\u9898",\n footer: footer,\n style: {\n width: 240\n },\n bodyStyle: {\n padding: 0\n }\n }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {\n alt: "example",\n width: "100%",\n src: "https://avatars1.githubusercontent.com/u/1680273?v=4"\n })), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n padding: "10px 16px"\n }\n }, /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n margin: 0\n }\n }, "\\u6211\\u7231\\u6F02\\u4EAE\\u59B9\\u59B9"), /*#__PURE__*/_react["default"].createElement("p", {\n style: {\n margin: 0\n }\n }, /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://uiwjs.github.io"\n }, "https://uiwjs.github.io"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Card, Icon } from \'uiw\';\n\nconst footer = (\n <a href="https://uiwjs.github.io">\n <Icon type=\'user\' />&nbsp;\n 16 Friends\n </a>\n)\n\nexport default function Demo() {\n return(\n <Card\n title="Card\u6807\u9898"\n footer={footer}\n style={{ width: 240 }} \n bodyStyle={{ padding: 0 }}\n >\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={{ padding: `10px 16px` }}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n )\n}'},138:{name:138,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 footer = /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://uiwjs.github.io"\n}, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n type: "user"\n}), "\\xA0 16 Friends");\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Card, {\n active: true,\n title: "Card\\u6807\\u9898",\n footer: footer,\n style: {\n width: 240\n },\n bodyStyle: {\n padding: 0\n }\n }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {\n alt: "example",\n width: "100%",\n src: "https://avatars1.githubusercontent.com/u/1680273?v=4"\n })), /*#__PURE__*/_react["default"].createElement("div", {\n style: {\n padding: "10px 16px"\n }\n }, /*#__PURE__*/_react["default"].createElement("h3", {\n style: {\n margin: 0\n }\n }, "\\u6211\\u7231\\u6F02\\u4EAE\\u59B9\\u59B9"), /*#__PURE__*/_react["default"].createElement("p", {\n style: {\n margin: 0\n }\n }, /*#__PURE__*/_react["default"].createElement("a", {\n href: "https://uiwjs.github.io"\n }, "https://uiwjs.github.io"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Card, Icon } from \'uiw\';\n\nconst footer = (\n <a href="https://uiwjs.github.io">\n <Icon type=\'user\' />&nbsp;\n 16 Friends\n </a>\n)\n\nexport default function Demo() {\n return(\n <Card\n active\n title="Card\u6807\u9898"\n footer={footer}\n style={{ width: 240 }} \n bodyStyle={{ padding: 0 }}\n >\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={{ padding: `10px 16px` }}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n );\n}'}},source:'Card \u5361\u7247\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-card/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-card.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-card)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-card.svg?label=@uiw/react-card)](https://npmjs.com/@uiw/react-card)\n\n\u901a\u7528\u5361\u7247\u5bb9\u5668\uff0c\u5c06\u4fe1\u606f\u805a\u5408\u5728\u5361\u7247\u5bb9\u5668\u4e2d\u5c55\u793a\uff0c\u7528\u6765\u663e\u793a\u6587\u5b57\u3001\u5217\u8868\u3001\u56fe\u6587\u7b49\u5185\u5bb9\u3002\n\n```jsx\nimport { Card } from \'uiw\';\n// or\nimport Card from \'@uiw/react-card\';\n```\n\n## \u57fa\u7840\u7528\u6cd5\n\n\u5305\u542b\u6807\u9898\u3001\u5185\u5bb9\u3001\u64cd\u4f5c\u533a\u57df\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Card } from \'uiw\';\n\nexport default function Demo() {\n return(\n <div>\n <Card title="Card\u6807\u9898" extra={<a href="#">\u66f4\u591a</a>} style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n </div>\n )\n}\n```\n\n## \u65e0\u8fb9\u6846\n\n\u5728\u7070\u8272\u80cc\u666f\u4e0a\u4f7f\u7528\u65e0\u8fb9\u6846\u7684\u5361\u7247\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Card } from \'uiw\';\n\nexport default function Demo() {\n return(\n <Card title="Card\u6807\u9898" bordered={false} style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n )\n}\n```\n\n## \u7b80\u6d01\u5361\u7247\n\n\u53ea\u5305\u542b\u5185\u5bb9\u533a\u57df\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Card } from \'uiw\';\n\nexport default function Demo() {\n return(\n <Card style={{ width: 300 }}>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n \u5361\u7247\u5185\u5bb9<br/>\n </Card>\n )\n}\n```\n\n## \u66f4\u7075\u6d3b\u7684\u5185\u5bb9\u5c55\u793a\n\n\u53ef\u4ee5\u8c03\u6574\u9ed8\u8ba4\u8fb9\u8ddd\uff0c\u8bbe\u5b9a\u5bbd\u5ea6\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Card } from \'uiw\';\n\nlet titleStyle = { padding: `10px 16px` };\n\nexport default function Demo() {\n return(\n <Card style={{ width: 240 }} bodyStyle={{ padding: 10 }}>\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={titleStyle}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n )\n}\n```\n\n## \u6dfb\u52a0\u9875\u811a\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Card, Icon } from \'uiw\';\n\nconst footer = (\n <a href="https://uiwjs.github.io">\n <Icon type=\'user\' />&nbsp;\n 16 Friends\n </a>\n)\n\nexport default function Demo() {\n return(\n <Card\n title="Card\u6807\u9898"\n footer={footer}\n style={{ width: 240 }} \n bodyStyle={{ padding: 0 }}\n >\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={{ padding: `10px 16px` }}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n )\n}\n```\n\n## \u6fc0\u6d3b\n\n\u8bbe\u7f6e\u5c5e\u6027 `active=true` \u5c06\u6fc0\u6d3b\u5361\u7247\uff0c\u9ed8\u8ba4\u5c55\u793a\u9f20\u6807\u7ecf\u8fc7\u7684\u6837\u5f0f\u3002\n\n```jsx mdx:preview\nimport React from \'react\';\nimport { Card, Icon } from \'uiw\';\n\nconst footer = (\n <a href="https://uiwjs.github.io">\n <Icon type=\'user\' />&nbsp;\n 16 Friends\n </a>\n)\n\nexport default function Demo() {\n return(\n <Card\n active\n title="Card\u6807\u9898"\n footer={footer}\n style={{ width: 240 }} \n bodyStyle={{ padding: 0 }}\n >\n <div>\n <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />\n </div>\n <div style={{ padding: `10px 16px` }}>\n <h3 style={{margin:0}}>\u6211\u7231\u6f02\u4eae\u59b9\u59b9</h3>\n <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>\n </div>\n </Card>\n );\n}\n```\n\n## API\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| title | \u5361\u7247\u6807\u9898 | String/ReactNode | - |\n| footer | \u9875\u811a\u5185\u5bb9\u7684\u7b80\u5199 | String/ReactNode | - |\n| extra | \u5361\u7247\u53f3\u4e0a\u89d2\u7684\u64cd\u4f5c\u533a\u57df | String/ReactNode | - |\n| bordered | \u662f\u5426\u663e\u793a\u8fb9\u6846 | Boolean | `true` |\n| active | \u5c55\u793a\u9f20\u6807\u7ecf\u8fc7\u7684\u6837\u5f0f\u3002 | Boolean | `false` |\n| noHover | \u53d6\u6d88\u9f20\u6807\u79fb\u8fc7\u65f6\u8fb9\u6846\u9634\u5f71 | Boolean | `false` |\n| bodyStyle | \u8bbe\u7f6e `body` \u7684\u6837\u5f0f | Object | - |\n| bodyClassName | \u8bbe\u7f6e `body` \u7684 `className` | String | - |',headings:[],headingsList:[]};var a=n(5301),i=n(4760);function u(){return(0,i.jsx)(a.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-card/README.md"})}}}]); //# sourceMappingURL=8386.5f782b05.chunk.js.map