import{d as y,_ as C,j as o,k as i,l as I,w as s,f as e,b as t,t as b,e as n,a as G,h as X,aY as x,F as w,n as f}from"./index.c1b9962e.js";import{u as R}from"./index.es.ed0d567a.js";import{S as W,M as L}from"./StarOutlined.4b64772a.js";import{L as Y}from"./LikeOutlined.5caf602b.js";const P=[{title:"Ant Design Title 1"},{title:"Ant Design Title 2"},{title:"Ant Design Title 3"},{title:"Ant Design Title 4"}],V=y({setup(){return{data:P}}}),S={href:"https://www.antdv.com/"};function H(p,a,d,m,A,h){const l=o("a-avatar"),u=o("a-list-item-meta"),k=o("a-list-item"),c=o("a-list"),r=o("demo-box");return i(),I(r,{jsfiddle:{us:"Basic list.",cn:"\u57FA\u7840\u5217\u8868\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u57FA\u7840\u5217\u8868\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Basic list.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic usage"},relativePath:"src/docs/list/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9Imhvcml6b250YWwiIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLnRpdGxlIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvT0RUTGNqeEFmdnFieEhuVlhDWVgucG5nIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW50ZXJmYWNlIERhdGFJdGVtIHsKICB0aXRsZTogc3RyaW5nOwp9CmNvbnN0IGRhdGE6IERhdGFJdGVtW10gPSBbCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDEnLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDInLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDMnLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDQnLAogIH0sCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9Imhvcml6b250YWwiIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLnRpdGxlIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvT0RUTGNqeEFmdnFieEhuVlhDWVgucG5nIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpjb25zdCBkYXRhID0gWwogIHsKICAgIHRpdGxlOiAnQW50IERlc2lnbiBUaXRsZSAxJywKICB9LAogIHsKICAgIHRpdGxlOiAnQW50IERlc2lnbiBUaXRsZSAyJywKICB9LAogIHsKICAgIHRpdGxlOiAnQW50IERlc2lnbiBUaXRsZSAzJywKICB9LAogIHsKICAgIHRpdGxlOiAnQW50IERlc2lnbiBUaXRsZSA0JywKICB9LApdOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(c,{"item-layout":"horizontal","data-source":p.data},{renderItem:s(({item:g})=>[e(k,null,{default:s(()=>[e(u,{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"},{title:s(()=>[t("a",S,b(g.title),1)]),avatar:s(()=>[e(l,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"})]),_:2},1024)]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[0]||(a[0]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("horizontal"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(`
          `),t("span",{class:"token attr-name"},"description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("Ant Design, a design language for background applications, is refined by Ant UED Team"),t("span",{class:"token punctuation"},'"')]),n(`
        `),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://www.antdv.com/"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.title }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"interface"),n(),t("span",{class:"token class-name"},"DataItem"),n(),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(" string"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"data"),t("span",{class:"token operator"},":"),n(" DataItem"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[1]||(a[1]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("horizontal"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(`
          `),t("span",{class:"token attr-name"},"description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("Ant Design, a design language for background applications, is refined by Ant UED Team"),t("span",{class:"token punctuation"},'"')]),n(`
        `),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://www.antdv.com/"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.title }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(" data "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Ant Design Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var D=C(V,[["render",H]]);const F=["Racing car sprays burning fuel into crowd.","Japanese princess to wed commoner.","Australian walks 100km after outback crash.","Man charged over missing wedding girl.","Los Angeles battles huge wildfires."],z=y({setup(){return{data:F}}});function J(p,a,d,m,A,h){const l=o("a-list-item"),u=o("a-list"),k=o("demo-box");return i(),I(k,{jsfiddle:{us:"Ant Design supports a default list size as well as a large and small size.\nIf a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.\nCustomizing the header and footer of list by setting `header` and `footer` property.",cn:"\u5217\u8868\u62E5\u6709\u5927\u3001\u4E2D\u3001\u5C0F\u4E09\u79CD\u5C3A\u5BF8\u3002\n\u901A\u8FC7\u8BBE\u7F6E `size` \u4E3A `large` `small` \u5206\u522B\u628A\u6309\u94AE\u8BBE\u4E3A\u5927\u3001\u5C0F\u5C3A\u5BF8\u3002\u82E5\u4E0D\u8BBE\u7F6E `size`\uFF0C\u5219\u5C3A\u5BF8\u4E3A\u4E2D\u3002\n\u53EF\u901A\u8FC7\u8BBE\u7F6E `header` \u548C `footer`\uFF0C\u6765\u81EA\u5B9A\u4E49\u5217\u8868\u5934\u90E8\u548C\u5C3E\u90E8\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u5217\u8868\u62E5\u6709\u5927\u3001\u4E2D\u3001\u5C0F\u4E09\u79CD\u5C3A\u5BF8\u3002
\u901A\u8FC7\u8BBE\u7F6E <code>size</code> \u4E3A <code>large</code> <code>small</code> \u5206\u522B\u628A\u6309\u94AE\u8BBE\u4E3A\u5927\u3001\u5C0F\u5C3A\u5BF8\u3002\u82E5\u4E0D\u8BBE\u7F6E <code>size</code>\uFF0C\u5219\u5C3A\u5BF8\u4E3A\u4E2D\u3002
\u53EF\u901A\u8FC7\u8BBE\u7F6E <code>header</code> \u548C <code>footer</code>\uFF0C\u6765\u81EA\u5B9A\u4E49\u5217\u8868\u5934\u90E8\u548C\u5C3E\u90E8\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Ant Design supports a default list size as well as a large and small size.
If a large or small list is desired, set the size property to either large or small respectively. Omit the size property for a list with the default size.
Customizing the header and footer of list by setting <code>header</code> and <code>footer</code> property.</p>
`,order:1,title:{"zh-CN":"\u7B80\u5355\u5217\u8868","en-US":"Simple list"},relativePath:"src/docs/list/demo/simple.vue",sourceCode:"PHRlbXBsYXRlPgogIDxoMyA6c3R5bGU9InsgbWFyZ2luOiAnMTZweCAwJyB9Ij5TbWFsbCBTaXplPC9oMz4KICA8YS1saXN0IHNpemU9InNtYWxsIiBib3JkZXJlZCA6ZGF0YS1zb3VyY2U9ImRhdGEiPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT57eyBpdGVtIH19PC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2hlYWRlcj4KICAgICAgPGRpdj5IZWFkZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2Zvb3Rlcj4KICAgICAgPGRpdj5Gb290ZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CiAgPGgzIDpzdHlsZT0ieyBtYXJnaW5Cb3R0b206ICcxNnB4JyB9Ij5EZWZhdWx0IFNpemU8L2gzPgogIDxhLWxpc3QgYm9yZGVyZWQgOmRhdGEtc291cmNlPSJkYXRhIj4KICAgIDx0ZW1wbGF0ZSAjcmVuZGVySXRlbT0ieyBpdGVtIH0iPgogICAgICA8YS1saXN0LWl0ZW0+e3sgaXRlbSB9fTwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNoZWFkZXI+CiAgICAgIDxkaXY+SGVhZGVyPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+Rm9vdGVyPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0PgogIDxoMyA6c3R5bGU9InsgbWFyZ2luOiAnMTZweCAwJyB9Ij5MYXJnZSBTaXplPC9oMz4KICA8YS1saXN0IHNpemU9ImxhcmdlIiBib3JkZXJlZCA6ZGF0YS1zb3VyY2U9ImRhdGEiPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT57eyBpdGVtIH19PC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2hlYWRlcj4KICAgICAgPGRpdj5IZWFkZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2Zvb3Rlcj4KICAgICAgPGRpdj5Gb290ZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpjb25zdCBkYXRhOiBzdHJpbmdbXSA9IFsKICAnUmFjaW5nIGNhciBzcHJheXMgYnVybmluZyBmdWVsIGludG8gY3Jvd2QuJywKICAnSmFwYW5lc2UgcHJpbmNlc3MgdG8gd2VkIGNvbW1vbmVyLicsCiAgJ0F1c3RyYWxpYW4gd2Fsa3MgMTAwa20gYWZ0ZXIgb3V0YmFjayBjcmFzaC4nLAogICdNYW4gY2hhcmdlZCBvdmVyIG1pc3Npbmcgd2VkZGluZyBnaXJsLicsCiAgJ0xvcyBBbmdlbGVzIGJhdHRsZXMgaHVnZSB3aWxkZmlyZXMuJywKXTsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxoMyA6c3R5bGU9InsgbWFyZ2luOiAnMTZweCAwJyB9Ij5TbWFsbCBTaXplPC9oMz4KICA8YS1saXN0IHNpemU9InNtYWxsIiBib3JkZXJlZCA6ZGF0YS1zb3VyY2U9ImRhdGEiPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT57eyBpdGVtIH19PC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2hlYWRlcj4KICAgICAgPGRpdj5IZWFkZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2Zvb3Rlcj4KICAgICAgPGRpdj5Gb290ZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CiAgPGgzIDpzdHlsZT0ieyBtYXJnaW5Cb3R0b206ICcxNnB4JyB9Ij5EZWZhdWx0IFNpemU8L2gzPgogIDxhLWxpc3QgYm9yZGVyZWQgOmRhdGEtc291cmNlPSJkYXRhIj4KICAgIDx0ZW1wbGF0ZSAjcmVuZGVySXRlbT0ieyBpdGVtIH0iPgogICAgICA8YS1saXN0LWl0ZW0+e3sgaXRlbSB9fTwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNoZWFkZXI+CiAgICAgIDxkaXY+SGVhZGVyPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+Rm9vdGVyPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0PgogIDxoMyA6c3R5bGU9InsgbWFyZ2luOiAnMTZweCAwJyB9Ij5MYXJnZSBTaXplPC9oMz4KICA8YS1saXN0IHNpemU9ImxhcmdlIiBib3JkZXJlZCA6ZGF0YS1zb3VyY2U9ImRhdGEiPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT57eyBpdGVtIH19PC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2hlYWRlcj4KICAgICAgPGRpdj5IZWFkZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgICA8dGVtcGxhdGUgI2Zvb3Rlcj4KICAgICAgPGRpdj5Gb290ZXI8L2Rpdj4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGRhdGEgPSBbCiAgJ1JhY2luZyBjYXIgc3ByYXlzIGJ1cm5pbmcgZnVlbCBpbnRvIGNyb3dkLicsCiAgJ0phcGFuZXNlIHByaW5jZXNzIHRvIHdlZCBjb21tb25lci4nLAogICdBdXN0cmFsaWFuIHdhbGtzIDEwMGttIGFmdGVyIG91dGJhY2sgY3Jhc2guJywKICAnTWFuIGNoYXJnZWQgb3ZlciBtaXNzaW5nIHdlZGRpbmcgZ2lybC4nLAogICdMb3MgQW5nZWxlcyBiYXR0bGVzIGh1Z2Ugd2lsZGZpcmVzLicsCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[a[6]||(a[6]=t("h3",{style:{margin:"16px 0"}},"Small Size",-1)),e(u,{size:"small",bordered:"","data-source":p.data},{renderItem:s(({item:c})=>[e(l,null,{default:s(()=>[n(b(c),1)]),_:2},1024)]),header:s(()=>a[0]||(a[0]=[t("div",null,"Header",-1)])),footer:s(()=>a[1]||(a[1]=[t("div",null,"Footer",-1)])),_:1},8,["data-source"]),a[7]||(a[7]=t("h3",{style:{marginBottom:"16px"}},"Default Size",-1)),e(u,{bordered:"","data-source":p.data},{renderItem:s(({item:c})=>[e(l,null,{default:s(()=>[n(b(c),1)]),_:2},1024)]),header:s(()=>a[2]||(a[2]=[t("div",null,"Header",-1)])),footer:s(()=>a[3]||(a[3]=[t("div",null,"Footer",-1)])),_:1},8,["data-source"]),a[8]||(a[8]=t("h3",{style:{margin:"16px 0"}},"Large Size",-1)),e(u,{size:"large",bordered:"","data-source":p.data},{renderItem:s(({item:c})=>[e(l,null,{default:s(()=>[n(b(c),1)]),_:2},1024)]),header:s(()=>a[4]||(a[4]=[t("div",null,"Header",-1)])),footer:s(()=>a[5]||(a[5]=[t("div",null,"Footer",-1)])),_:1},8,["data-source"])]),htmlCode:s(()=>a[9]||(a[9]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ margin: '16px 0' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Small Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("small"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ marginBottom: '16px' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Default Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ margin: '16px 0' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Large Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("large"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"data"),t("span",{class:"token operator"},":"),n(" string"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token string"},"'Racing car sprays burning fuel into crowd.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Japanese princess to wed commoner.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Australian walks 100km after outback crash.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Man charged over missing wedding girl.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Los Angeles battles huge wildfires.'"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[10]||(a[10]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ margin: '16px 0' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Small Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("small"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ marginBottom: '16px' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Default Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("h3")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ margin: '16px 0' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Large Size"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("h3")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("large"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"bordered"),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n("{{ item }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#header"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Header"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("Footer"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(" data "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token string"},"'Racing car sprays burning fuel into crowd.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Japanese princess to wed commoner.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Australian walks 100km after outback crash.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Man charged over missing wedding girl.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token string"},"'Los Angeles battles huge wildfires.'"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var N=C(z,[["render",J]]);const T=()=>"https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo",j=y({setup(){const{dataList:p,loading:a,loadingMore:d,loadMore:m}=R(T,{listKey:"results"});return{loading:a,loadingMore:d,dataList:p,loadMore:m}}}),K={style:{textAlign:"center",marginTop:"12px",height:"32px",lineHeight:"32px"}},E={href:"https://www.antdv.com/"};function U(p,a,d,m,A,h){const l=o("a-spin"),u=o("a-button"),k=o("a-avatar"),c=o("a-list-item-meta"),r=o("a-list-item"),g=o("a-list"),v=o("demo-box");return i(),I(v,{jsfiddle:{us:"Load more list with `loadMore` property.",cn:"\u53EF\u901A\u8FC7 `loadMore` \u5C5E\u6027\u5B9E\u73B0\u52A0\u8F7D\u66F4\u591A\u529F\u80FD\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u53EF\u901A\u8FC7 <code>loadMore</code> \u5C5E\u6027\u5B9E\u73B0\u52A0\u8F7D\u66F4\u591A\u529F\u80FD\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Load more list with <code>loadMore</code> property.</p>
`,order:2,title:{"zh-CN":"\u52A0\u8F7D\u66F4\u591A","en-US":"Load more"},relativePath:"src/docs/list/demo/loadmore.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIGNsYXNzPSJkZW1vLWxvYWRtb3JlLWxpc3QiCiAgICA6bG9hZGluZz0ibG9hZGluZyIKICAgIGl0ZW0tbGF5b3V0PSJob3Jpem9udGFsIgogICAgOmRhdGEtc291cmNlPSJkYXRhTGlzdCIKICA+CiAgICA8dGVtcGxhdGUgI2xvYWRNb3JlPgogICAgICA8ZGl2IDpzdHlsZT0ieyB0ZXh0QWxpZ246ICdjZW50ZXInLCBtYXJnaW5Ub3A6ICcxMnB4JywgaGVpZ2h0OiAnMzJweCcsIGxpbmVIZWlnaHQ6ICczMnB4JyB9Ij4KICAgICAgICA8YS1zcGluIHYtaWY9ImxvYWRpbmdNb3JlIiAvPgogICAgICAgIDxhLWJ1dHRvbiB2LWVsc2UgQGNsaWNrPSJsb2FkTW9yZSI+bG9hZGluZyBtb3JlPC9hLWJ1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8dGVtcGxhdGUgI2FjdGlvbnM+CiAgICAgICAgICA8YT5lZGl0PC9hPgogICAgICAgICAgPGE+bW9yZTwvYT4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLm5hbWUubGFzdCB9fTwvYT4KICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICA8dGVtcGxhdGUgI2F2YXRhcj4KICAgICAgICAgICAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIDxkaXY+Y29udGVudDwvZGl2PgogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IHVzZUxvYWRNb3JlIH0gZnJvbSAndnVlLXJlcXVlc3QnOwoKY29uc3QgZ2V0RmFrZURhdGEgPSAoKSA9PiBgaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS8/cmVzdWx0cz01JmluYz1uYW1lLGdlbmRlcixlbWFpbCxuYXQmbm9pbmZvYDsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCB7IGRhdGFMaXN0LCBsb2FkaW5nLCBsb2FkaW5nTW9yZSwgbG9hZE1vcmUgfSA9IHVzZUxvYWRNb3JlKGdldEZha2VEYXRhLCB7CiAgICAgIGxpc3RLZXk6ICdyZXN1bHRzJywKICAgIH0pOwoKICAgIHJldHVybiB7CiAgICAgIGxvYWRpbmcsCiAgICAgIGxvYWRpbmdNb3JlLAogICAgICBkYXRhTGlzdCwKICAgICAgbG9hZE1vcmUsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KPHN0eWxlIHNjb3BlZD4KLmRlbW8tbG9hZG1vcmUtbGlzdCB7CiAgbWluLWhlaWdodDogMzUwcHg7Cn0KPC9zdHlsZT4K",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIGNsYXNzPSJkZW1vLWxvYWRtb3JlLWxpc3QiCiAgICA6bG9hZGluZz0ibG9hZGluZyIKICAgIGl0ZW0tbGF5b3V0PSJob3Jpem9udGFsIgogICAgOmRhdGEtc291cmNlPSJkYXRhTGlzdCIKICA+CiAgICA8dGVtcGxhdGUgI2xvYWRNb3JlPgogICAgICA8ZGl2IDpzdHlsZT0ieyB0ZXh0QWxpZ246ICdjZW50ZXInLCBtYXJnaW5Ub3A6ICcxMnB4JywgaGVpZ2h0OiAnMzJweCcsIGxpbmVIZWlnaHQ6ICczMnB4JyB9Ij4KICAgICAgICA8YS1zcGluIHYtaWY9ImxvYWRpbmdNb3JlIiAvPgogICAgICAgIDxhLWJ1dHRvbiB2LWVsc2UgQGNsaWNrPSJsb2FkTW9yZSI+bG9hZGluZyBtb3JlPC9hLWJ1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8dGVtcGxhdGUgI2FjdGlvbnM+CiAgICAgICAgICA8YT5lZGl0PC9hPgogICAgICAgICAgPGE+bW9yZTwvYT4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLm5hbWUubGFzdCB9fTwvYT4KICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICA8dGVtcGxhdGUgI2F2YXRhcj4KICAgICAgICAgICAgPGEtYXZhdGFyIHNyYz0iaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZyIgLz4KICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIDxkaXY+Y29udGVudDwvZGl2PgogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgdXNlTG9hZE1vcmUgfSBmcm9tICd2dWUtcmVxdWVzdCc7CmNvbnN0IGdldEZha2VEYXRhID0gKCkgPT4gYGh0dHBzOi8vcmFuZG9tdXNlci5tZS9hcGkvP3Jlc3VsdHM9NSZpbmM9bmFtZSxnZW5kZXIsZW1haWwsbmF0Jm5vaW5mb2A7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCB7IGRhdGFMaXN0LCBsb2FkaW5nLCBsb2FkaW5nTW9yZSwgbG9hZE1vcmUgfSA9IHVzZUxvYWRNb3JlKGdldEZha2VEYXRhLCB7CiAgICAgIGxpc3RLZXk6ICdyZXN1bHRzJywKICAgIH0pOwogICAgcmV0dXJuIHsKICAgICAgbG9hZGluZywKICAgICAgbG9hZGluZ01vcmUsCiAgICAgIGRhdGFMaXN0LAogICAgICBsb2FkTW9yZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgouZGVtby1sb2FkbW9yZS1saXN0IHsKICBtaW4taGVpZ2h0OiAzNTBweDsKfQo8L3N0eWxlPg=="}},{default:s(()=>[e(g,{class:"demo-loadmore-list",loading:p.loading,"item-layout":"horizontal","data-source":p.dataList},{loadMore:s(()=>[t("div",K,[p.loadingMore?(i(),I(l,{key:0})):(i(),I(u,{key:1,onClick:p.loadMore},{default:s(()=>a[0]||(a[0]=[n("loading more")])),_:1,__:[0]},8,["onClick"]))])]),renderItem:s(({item:Z})=>[e(r,null,{actions:s(()=>a[1]||(a[1]=[t("a",null,"edit",-1),t("a",null,"more",-1)])),default:s(()=>[e(c,{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"},{title:s(()=>[t("a",E,b(Z.name.last),1)]),avatar:s(()=>[e(k,{src:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"})]),_:2},1024),a[2]||(a[2]=t("div",null,"content",-1))]),_:2,__:[2]},1024)]),_:1},8,["loading","data-source"])]),htmlCode:s(()=>a[3]||(a[3]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(`
    `),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("demo-loadmore-list"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},":loading"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loading"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("horizontal"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("dataList"),t("span",{class:"token punctuation"},'"')]),n(`
  `),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#loadMore"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-spin")]),n(),t("span",{class:"token attr-name"},"v-if"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loadingMore"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-button")]),n(),t("span",{class:"token attr-name"},"v-else"),n(),t("span",{class:"token attr-name"},"@click"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loadMore"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("loading more"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-button")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#actions"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),t("span",{class:"token punctuation"},">")]),n("edit"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),t("span",{class:"token punctuation"},">")]),n("more"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(`
          `),t("span",{class:"token attr-name"},"description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("Ant Design, a design language for background applications, is refined by Ant UED Team"),t("span",{class:"token punctuation"},'"')]),n(`
        `),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://www.antdv.com/"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.name.last }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" useLoadMore "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue-request'"),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token function-variable function"},"getFakeData"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token operator"},"=>"),n(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token punctuation"},"{"),n(" dataList"),t("span",{class:"token punctuation"},","),n(" loading"),t("span",{class:"token punctuation"},","),n(" loadingMore"),t("span",{class:"token punctuation"},","),n(" loadMore "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token function"},"useLoadMore"),t("span",{class:"token punctuation"},"("),n("getFakeData"),t("span",{class:"token punctuation"},","),n(),t("span",{class:"token punctuation"},"{"),n(`
      `),t("span",{class:"token literal-property property"},"listKey"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'results'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`

    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      loading`),t("span",{class:"token punctuation"},","),n(`
      loadingMore`),t("span",{class:"token punctuation"},","),n(`
      dataList`),t("span",{class:"token punctuation"},","),n(`
      loadMore`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("style")]),n(),t("span",{class:"token attr-name"},"scoped"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[n(`
`),t("span",{class:"token selector"},".demo-loadmore-list"),n(),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),n(" 350px"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("style")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[4]||(a[4]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(`
    `),t("span",{class:"token attr-name"},"class"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("demo-loadmore-list"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},":loading"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loading"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("horizontal"),t("span",{class:"token punctuation"},'"')]),n(`
    `),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("dataList"),t("span",{class:"token punctuation"},'"')]),n(`
  `),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#loadMore"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),n(),t("span",{class:"token attr-name"},":style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-spin")]),n(),t("span",{class:"token attr-name"},"v-if"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loadingMore"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-button")]),n(),t("span",{class:"token attr-name"},"v-else"),n(),t("span",{class:"token attr-name"},"@click"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("loadMore"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("loading more"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-button")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#actions"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),t("span",{class:"token punctuation"},">")]),n("edit"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),t("span",{class:"token punctuation"},">")]),n("more"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(`
          `),t("span",{class:"token attr-name"},"description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("Ant Design, a design language for background applications, is refined by Ant UED Team"),t("span",{class:"token punctuation"},'"')]),n(`
        `),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},"href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://www.antdv.com/"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.name.last }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n("content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" useLoadMore "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue-request'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token function-variable function"},"getFakeData"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token operator"},"=>"),n(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo"),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token punctuation"},"{"),n(" dataList"),t("span",{class:"token punctuation"},","),n(" loading"),t("span",{class:"token punctuation"},","),n(" loadingMore"),t("span",{class:"token punctuation"},","),n(" loadMore "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token function"},"useLoadMore"),t("span",{class:"token punctuation"},"("),n("getFakeData"),t("span",{class:"token punctuation"},","),n(),t("span",{class:"token punctuation"},"{"),n(`
      `),t("span",{class:"token literal-property property"},"listKey"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'results'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      loading`),t("span",{class:"token punctuation"},","),n(`
      loadingMore`),t("span",{class:"token punctuation"},","),n(`
      dataList`),t("span",{class:"token punctuation"},","),n(`
      loadMore`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("style")]),n(),t("span",{class:"token attr-name"},"scoped"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token style"},[t("span",{class:"token language-css"},[n(`
`),t("span",{class:"token selector"},".demo-loadmore-list"),n(),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token property"},"min-height"),t("span",{class:"token punctuation"},":"),n(" 350px"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("style")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var Q=C(j,[["render",U],["__scopeId","data-v-f875f788"]]);const B=[];for(let p=0;p<23;p++)B.push({href:"https://www.antdv.com/",title:`ant design vue part ${p}`,avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",description:"Ant Design, a design language for background applications, is refined by Ant UED Team.",content:"We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."});const _=y({components:{StarOutlined:W,LikeOutlined:Y,MessageOutlined:L},setup(){return{listData:B,pagination:{onChange:d=>{console.log(d)},pageSize:3},actions:[{type:"StarOutlined",text:"156"},{type:"LikeOutlined",text:"156"},{type:"MessageOutlined",text:"2"}]}}}),q=["href"];function M(p,a,d,m,A,h){const l=o("a-avatar"),u=o("a-list-item-meta"),k=o("a-list-item"),c=o("a-list"),r=o("demo-box");return i(),I(r,{jsfiddle:{us:"Setting `itemLayout` property with `vertical` to create a vertical list.",cn:"\u901A\u8FC7\u8BBE\u7F6E `itemLayout` \u5C5E\u6027\u4E3A `vertical` \u53EF\u5B9E\u73B0\u7AD6\u6392\u5217\u8868\u6837\u5F0F\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u901A\u8FC7\u8BBE\u7F6E <code>itemLayout</code> \u5C5E\u6027\u4E3A <code>vertical</code> \u53EF\u5B9E\u73B0\u7AD6\u6392\u5217\u8868\u6837\u5F0F\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Setting <code>itemLayout</code> property with <code>vertical</code> to create a vertical list.</p>
`,order:3,title:{"zh-CN":"\u7AD6\u6392\u5217\u8868\u6837\u5F0F","en-US":"Vertical"},relativePath:"src/docs/list/demo/vertical.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9InZlcnRpY2FsIiBzaXplPSJsYXJnZSIgOnBhZ2luYXRpb249InBhZ2luYXRpb24iIDpkYXRhLXNvdXJjZT0ibGlzdERhdGEiPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+CiAgICAgICAgPGI+YW50IGRlc2lnbiB2dWU8L2I+CiAgICAgICAgZm9vdGVyIHBhcnQKICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSBrZXk9Iml0ZW0udGl0bGUiPgogICAgICAgIDx0ZW1wbGF0ZSAjYWN0aW9ucz4KICAgICAgICAgIDxzcGFuIHYtZm9yPSJ7IHR5cGUsIHRleHQgfSBpbiBhY3Rpb25zIiA6a2V5PSJ0eXBlIj4KICAgICAgICAgICAgPGNvbXBvbmVudCB2LWJpbmQ6aXM9InR5cGUiIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgLz4KICAgICAgICAgICAge3sgdGV4dCB9fQogICAgICAgICAgPC9zcGFuPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgd2lkdGg9IjI3MiIKICAgICAgICAgICAgYWx0PSJsb2dvIgogICAgICAgICAgICBzcmM9Imh0dHBzOi8vZ3cuYWxpcGF5b2JqZWN0cy5jb20vem9zL3Jtc3BvcnRhbC9tcWFRc3djeURMY1h5REtuWmZFUy5wbmciCiAgICAgICAgICAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgOmRlc2NyaXB0aW9uPSJpdGVtLmRlc2NyaXB0aW9uIj4KICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgIDxhIDpocmVmPSJpdGVtLmhyZWYiPnt7IGl0ZW0udGl0bGUgfX08L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgPHRlbXBsYXRlICNhdmF0YXI+PGEtYXZhdGFyIDpzcmM9Iml0ZW0uYXZhdGFyIiAvPjwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIHt7IGl0ZW0uY29udGVudCB9fQogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFN0YXJPdXRsaW5lZCwgTGlrZU91dGxpbmVkLCBNZXNzYWdlT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwoKY29uc3QgbGlzdERhdGE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz5bXSA9IFtdOwoKZm9yIChsZXQgaSA9IDA7IGkgPCAyMzsgaSsrKSB7CiAgbGlzdERhdGEucHVzaCh7CiAgICBocmVmOiAnaHR0cHM6Ly93d3cuYW50ZHYuY29tLycsCiAgICB0aXRsZTogYGFudCBkZXNpZ24gdnVlIHBhcnQgJHtpfWAsCiAgICBhdmF0YXI6ICdodHRwczovL3pvcy5hbGlwYXlvYmplY3RzLmNvbS9ybXNwb3J0YWwvT0RUTGNqeEFmdnFieEhuVlhDWVgucG5nJywKICAgIGRlc2NyaXB0aW9uOgogICAgICAnQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbS4nLAogICAgY29udGVudDoKICAgICAgJ1dlIHN1cHBseSBhIHNlcmllcyBvZiBkZXNpZ24gcHJpbmNpcGxlcywgcHJhY3RpY2FsIHBhdHRlcm5zIGFuZCBoaWdoIHF1YWxpdHkgZGVzaWduIHJlc291cmNlcyAoU2tldGNoIGFuZCBBeHVyZSksIHRvIGhlbHAgcGVvcGxlIGNyZWF0ZSB0aGVpciBwcm9kdWN0IHByb3RvdHlwZXMgYmVhdXRpZnVsbHkgYW5kIGVmZmljaWVudGx5LicsCiAgfSk7Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgU3Rhck91dGxpbmVkLAogICAgTGlrZU91dGxpbmVkLAogICAgTWVzc2FnZU91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBwYWdpbmF0aW9uID0gewogICAgICBvbkNoYW5nZTogKHBhZ2U6IG51bWJlcikgPT4gewogICAgICAgIGNvbnNvbGUubG9nKHBhZ2UpOwogICAgICB9LAogICAgICBwYWdlU2l6ZTogMywKICAgIH07CiAgICBjb25zdCBhY3Rpb25zOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+W10gPSBbCiAgICAgIHsgdHlwZTogJ1N0YXJPdXRsaW5lZCcsIHRleHQ6ICcxNTYnIH0sCiAgICAgIHsgdHlwZTogJ0xpa2VPdXRsaW5lZCcsIHRleHQ6ICcxNTYnIH0sCiAgICAgIHsgdHlwZTogJ01lc3NhZ2VPdXRsaW5lZCcsIHRleHQ6ICcyJyB9LAogICAgXTsKICAgIHJldHVybiB7CiAgICAgIGxpc3REYXRhLAogICAgICBwYWdpbmF0aW9uLAogICAgICBhY3Rpb25zLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9InZlcnRpY2FsIiBzaXplPSJsYXJnZSIgOnBhZ2luYXRpb249InBhZ2luYXRpb24iIDpkYXRhLXNvdXJjZT0ibGlzdERhdGEiPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+CiAgICAgICAgPGI+YW50IGRlc2lnbiB2dWU8L2I+CiAgICAgICAgZm9vdGVyIHBhcnQKICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSBrZXk9Iml0ZW0udGl0bGUiPgogICAgICAgIDx0ZW1wbGF0ZSAjYWN0aW9ucz4KICAgICAgICAgIDxzcGFuIHYtZm9yPSJ7IHR5cGUsIHRleHQgfSBpbiBhY3Rpb25zIiA6a2V5PSJ0eXBlIj4KICAgICAgICAgICAgPGNvbXBvbmVudCB2LWJpbmQ6aXM9InR5cGUiIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgLz4KICAgICAgICAgICAge3sgdGV4dCB9fQogICAgICAgICAgPC9zcGFuPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgd2lkdGg9IjI3MiIKICAgICAgICAgICAgYWx0PSJsb2dvIgogICAgICAgICAgICBzcmM9Imh0dHBzOi8vZ3cuYWxpcGF5b2JqZWN0cy5jb20vem9zL3Jtc3BvcnRhbC9tcWFRc3djeURMY1h5REtuWmZFUy5wbmciCiAgICAgICAgICAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgOmRlc2NyaXB0aW9uPSJpdGVtLmRlc2NyaXB0aW9uIj4KICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgIDxhIDpocmVmPSJpdGVtLmhyZWYiPnt7IGl0ZW0udGl0bGUgfX08L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgPHRlbXBsYXRlICNhdmF0YXI+PGEtYXZhdGFyIDpzcmM9Iml0ZW0uYXZhdGFyIiAvPjwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIHt7IGl0ZW0uY29udGVudCB9fQogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgU3Rhck91dGxpbmVkLCBMaWtlT3V0bGluZWQsIE1lc3NhZ2VPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGxpc3REYXRhID0gW107CmZvciAobGV0IGkgPSAwOyBpIDwgMjM7IGkrKykgewogIGxpc3REYXRhLnB1c2goewogICAgaHJlZjogJ2h0dHBzOi8vd3d3LmFudGR2LmNvbS8nLAogICAgdGl0bGU6IGBhbnQgZGVzaWduIHZ1ZSBwYXJ0ICR7aX1gLAogICAgYXZhdGFyOiAnaHR0cHM6Ly96b3MuYWxpcGF5b2JqZWN0cy5jb20vcm1zcG9ydGFsL09EVExjanhBZnZxYnhIblZYQ1lYLnBuZycsCiAgICBkZXNjcmlwdGlvbjoKICAgICAgJ0FudCBEZXNpZ24sIGEgZGVzaWduIGxhbmd1YWdlIGZvciBiYWNrZ3JvdW5kIGFwcGxpY2F0aW9ucywgaXMgcmVmaW5lZCBieSBBbnQgVUVEIFRlYW0uJywKICAgIGNvbnRlbnQ6CiAgICAgICdXZSBzdXBwbHkgYSBzZXJpZXMgb2YgZGVzaWduIHByaW5jaXBsZXMsIHByYWN0aWNhbCBwYXR0ZXJucyBhbmQgaGlnaCBxdWFsaXR5IGRlc2lnbiByZXNvdXJjZXMgKFNrZXRjaCBhbmQgQXh1cmUpLCB0byBoZWxwIHBlb3BsZSBjcmVhdGUgdGhlaXIgcHJvZHVjdCBwcm90b3R5cGVzIGJlYXV0aWZ1bGx5IGFuZCBlZmZpY2llbnRseS4nLAogIH0pOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgU3Rhck91dGxpbmVkLAogICAgTGlrZU91dGxpbmVkLAogICAgTWVzc2FnZU91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBwYWdpbmF0aW9uID0gewogICAgICBvbkNoYW5nZTogcGFnZSA9PiB7CiAgICAgICAgY29uc29sZS5sb2cocGFnZSk7CiAgICAgIH0sCiAgICAgIHBhZ2VTaXplOiAzLAogICAgfTsKICAgIGNvbnN0IGFjdGlvbnMgPSBbCiAgICAgIHsKICAgICAgICB0eXBlOiAnU3Rhck91dGxpbmVkJywKICAgICAgICB0ZXh0OiAnMTU2JywKICAgICAgfSwKICAgICAgewogICAgICAgIHR5cGU6ICdMaWtlT3V0bGluZWQnLAogICAgICAgIHRleHQ6ICcxNTYnLAogICAgICB9LAogICAgICB7CiAgICAgICAgdHlwZTogJ01lc3NhZ2VPdXRsaW5lZCcsCiAgICAgICAgdGV4dDogJzInLAogICAgICB9LAogICAgXTsKICAgIHJldHVybiB7CiAgICAgIGxpc3REYXRhLAogICAgICBwYWdpbmF0aW9uLAogICAgICBhY3Rpb25zLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[e(c,{"item-layout":"vertical",size:"large",pagination:p.pagination,"data-source":p.listData},{footer:s(()=>a[0]||(a[0]=[t("div",null,[t("b",null,"ant design vue"),n(" footer part ")],-1)])),renderItem:s(({item:g})=>[e(k,{key:"item.title"},{actions:s(()=>[(i(!0),G(w,null,X(p.actions,({type:v,text:Z})=>(i(),G("span",{key:v},[(i(),I(x(v),{style:{"margin-right":"8px"}})),n(" "+b(Z),1)]))),128))]),extra:s(()=>a[1]||(a[1]=[t("img",{width:"272",alt:"logo",src:"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"},null,-1)])),default:s(()=>[e(u,{description:g.description},{title:s(()=>[t("a",{href:g.href},b(g.title),9,q)]),avatar:s(()=>[e(l,{src:g.avatar},null,8,["src"])]),_:2},1032,["description"]),n(" "+b(g.content),1)]),_:2},1024)]),_:1},8,["pagination","data-source"])]),htmlCode:s(()=>a[2]||(a[2]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("vertical"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("large"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":pagination"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("pagination"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("listData"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("b")]),t("span",{class:"token punctuation"},">")]),n("ant design vue"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("b")]),t("span",{class:"token punctuation"},">")]),n(`
        footer part
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),n(),t("span",{class:"token attr-name"},"key"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#actions"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("span")]),n(),t("span",{class:"token attr-name"},"v-for"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ type, text } in actions"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":key"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("type"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("component")]),n(),t("span",{class:"token attr-name"},[t("span",{class:"token namespace"},"v-bind:"),n("is")]),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("type"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"margin-right"),t("span",{class:"token punctuation"},":"),n(" 8px")]),t("span",{class:"token punctuation"},'"')])]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
            {{ text }}
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("span")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#extra"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("img")]),n(`
            `),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("272"),t("span",{class:"token punctuation"},'"')]),n(`
            `),t("span",{class:"token attr-name"},"alt"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("logo"),t("span",{class:"token punctuation"},'"')]),n(`
            `),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"),t("span",{class:"token punctuation"},'"')]),n(`
          `),t("span",{class:"token punctuation"},"/>")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(),t("span",{class:"token attr-name"},":description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.description"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},":href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.href"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.title }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},":src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.avatar"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
        {{ item.content }}
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" StarOutlined"),t("span",{class:"token punctuation"},","),n(" LikeOutlined"),t("span",{class:"token punctuation"},","),n(" MessageOutlined "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'@ant-design/icons-vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"listData"),t("span",{class:"token operator"},":"),n(" Record"),t("span",{class:"token operator"},"<"),n("string"),t("span",{class:"token punctuation"},","),n(" string"),t("span",{class:"token operator"},">"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"for"),n(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),n(" i "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),n(" i "),t("span",{class:"token operator"},"<"),n(),t("span",{class:"token number"},"23"),t("span",{class:"token punctuation"},";"),n(" i"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
  listData`),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"href"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'https://www.antdv.com/'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"ant design vue part "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),n("i"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"avatar"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"description"),t("span",{class:"token operator"},":"),n(`
      `),t("span",{class:"token string"},"'Ant Design, a design language for background applications, is refined by Ant UED Team.'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"content"),t("span",{class:"token operator"},":"),n(`
      `),t("span",{class:"token string"},"'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`

`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token literal-property property"},"components"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token punctuation"},"{"),n(`
    StarOutlined`),t("span",{class:"token punctuation"},","),n(`
    LikeOutlined`),t("span",{class:"token punctuation"},","),n(`
    MessageOutlined`),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"const"),n(" pagination "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"{"),n(`
      `),t("span",{class:"token function-variable function"},"onChange"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token punctuation"},"("),t("span",{class:"token parameter"},[t("span",{class:"token literal-property property"},"page"),t("span",{class:"token operator"},":"),n(" number")]),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token operator"},"=>"),n(),t("span",{class:"token punctuation"},"{"),n(`
        console`),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),n("page"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
      `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token literal-property property"},"pageSize"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
    `),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"actions"),t("span",{class:"token operator"},":"),n(" Record"),t("span",{class:"token operator"},"<"),n("string"),t("span",{class:"token punctuation"},","),n(" string"),t("span",{class:"token operator"},">"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
      `),t("span",{class:"token punctuation"},"{"),n(),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'StarOutlined'"),t("span",{class:"token punctuation"},","),n(),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'156'"),n(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"{"),n(),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'LikeOutlined'"),t("span",{class:"token punctuation"},","),n(),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'156'"),n(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"{"),n(),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'MessageOutlined'"),t("span",{class:"token punctuation"},","),n(),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'2'"),n(),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      listData`),t("span",{class:"token punctuation"},","),n(`
      pagination`),t("span",{class:"token punctuation"},","),n(`
      actions`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[3]||(a[3]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},"item-layout"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("vertical"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},"size"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("large"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":pagination"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("pagination"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("listData"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#footer"),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("b")]),t("span",{class:"token punctuation"},">")]),n("ant design vue"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("b")]),t("span",{class:"token punctuation"},">")]),n(`
        footer part
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("div")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),n(),t("span",{class:"token attr-name"},"key"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#actions"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("span")]),n(),t("span",{class:"token attr-name"},"v-for"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ type, text } in actions"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":key"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("type"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("component")]),n(),t("span",{class:"token attr-name"},[t("span",{class:"token namespace"},"v-bind:"),n("is")]),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("type"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"margin-right"),t("span",{class:"token punctuation"},":"),n(" 8px")]),t("span",{class:"token punctuation"},'"')])]),n(),t("span",{class:"token punctuation"},"/>")]),n(`
            {{ text }}
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("span")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#extra"),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("img")]),n(`
            `),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("272"),t("span",{class:"token punctuation"},'"')]),n(`
            `),t("span",{class:"token attr-name"},"alt"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("logo"),t("span",{class:"token punctuation"},'"')]),n(`
            `),t("span",{class:"token attr-name"},"src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"),t("span",{class:"token punctuation"},'"')]),n(`
          `),t("span",{class:"token punctuation"},"/>")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item-meta")]),n(),t("span",{class:"token attr-name"},":description"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.description"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#title"),t("span",{class:"token punctuation"},">")]),n(`
            `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a")]),n(),t("span",{class:"token attr-name"},":href"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.href"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("{{ item.title }}"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
          `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#avatar"),t("span",{class:"token punctuation"},">")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-avatar")]),n(),t("span",{class:"token attr-name"},":src"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.avatar"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token punctuation"},"/>")]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item-meta")]),t("span",{class:"token punctuation"},">")]),n(`
        {{ item.content }}
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" StarOutlined"),t("span",{class:"token punctuation"},","),n(" LikeOutlined"),t("span",{class:"token punctuation"},","),n(" MessageOutlined "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'@ant-design/icons-vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(" listData "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"for"),n(),t("span",{class:"token punctuation"},"("),t("span",{class:"token keyword"},"let"),n(" i "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token number"},"0"),t("span",{class:"token punctuation"},";"),n(" i "),t("span",{class:"token operator"},"<"),n(),t("span",{class:"token number"},"23"),t("span",{class:"token punctuation"},";"),n(" i"),t("span",{class:"token operator"},"++"),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
  listData`),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"push"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"href"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'https://www.antdv.com/'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token template-string"},[t("span",{class:"token template-punctuation string"},"`"),t("span",{class:"token string"},"ant design vue part "),t("span",{class:"token interpolation"},[t("span",{class:"token interpolation-punctuation punctuation"},"${"),n("i"),t("span",{class:"token interpolation-punctuation punctuation"},"}")]),t("span",{class:"token template-punctuation string"},"`")]),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"avatar"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"description"),t("span",{class:"token operator"},":"),n(`
      `),t("span",{class:"token string"},"'Ant Design, a design language for background applications, is refined by Ant UED Team.'"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token literal-property property"},"content"),t("span",{class:"token operator"},":"),n(`
      `),t("span",{class:"token string"},"'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token literal-property property"},"components"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token punctuation"},"{"),n(`
    StarOutlined`),t("span",{class:"token punctuation"},","),n(`
    LikeOutlined`),t("span",{class:"token punctuation"},","),n(`
    MessageOutlined`),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"const"),n(" pagination "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"{"),n(`
      `),t("span",{class:"token function-variable function"},"onChange"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token parameter"},"page"),n(),t("span",{class:"token operator"},"=>"),n(),t("span",{class:"token punctuation"},"{"),n(`
        console`),t("span",{class:"token punctuation"},"."),t("span",{class:"token function"},"log"),t("span",{class:"token punctuation"},"("),n("page"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
      `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token literal-property property"},"pageSize"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token number"},"3"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
    `),t("span",{class:"token keyword"},"const"),n(" actions "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
      `),t("span",{class:"token punctuation"},"{"),n(`
        `),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'StarOutlined'"),t("span",{class:"token punctuation"},","),n(`
        `),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'156'"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"{"),n(`
        `),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'LikeOutlined'"),t("span",{class:"token punctuation"},","),n(`
        `),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'156'"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"{"),n(`
        `),t("span",{class:"token literal-property property"},"type"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'MessageOutlined'"),t("span",{class:"token punctuation"},","),n(`
        `),t("span",{class:"token literal-property property"},"text"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'2'"),t("span",{class:"token punctuation"},","),n(`
      `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      listData`),t("span",{class:"token punctuation"},","),n(`
      pagination`),t("span",{class:"token punctuation"},","),n(`
      actions`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var O=C(_,[["render",M]]);const $=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"}],tt=y({setup(){return{data:$}}});function nt(p,a,d,m,A,h){const l=o("a-card"),u=o("a-list-item"),k=o("a-list"),c=o("demo-box");return i(),I(c,{jsfiddle:{us:"Creating a grid list by setting the `grid` property of List",cn:"\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E `List` \u7684 `grid` \u5C5E\u6027\u6765\u5B9E\u73B0\u6805\u683C\u5217\u8868\uFF0C`column` \u53EF\u8BBE\u7F6E\u671F\u671B\u663E\u793A\u7684\u5217\u6570\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>List</code> \u7684 <code>grid</code> \u5C5E\u6027\u6765\u5B9E\u73B0\u6805\u683C\u5217\u8868\uFF0C<code>column</code> \u53EF\u8BBE\u7F6E\u671F\u671B\u663E\u793A\u7684\u5217\u6570\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Creating a grid list by setting the <code>grid</code> property of List</p>
`,order:4,title:{"zh-CN":"\u6805\u683C\u5217\u8868","en-US":"Grid"},relativePath:"src/docs/list/demo/grid.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgY29sdW1uOiA0IH0iIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWNhcmQgOnRpdGxlPSJpdGVtLnRpdGxlIj5DYXJkIGNvbnRlbnQ8L2EtY2FyZD4KICAgICAgPC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbnRlcmZhY2UgRGF0YUl0ZW0gewogIHRpdGxlOiBzdHJpbmc7Cn0KY29uc3QgZGF0YTogRGF0YUl0ZW1bXSA9IFsKICB7CiAgICB0aXRsZTogJ1RpdGxlIDEnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSAyJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgMycsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDQnLAogIH0sCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgY29sdW1uOiA0IH0iIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWNhcmQgOnRpdGxlPSJpdGVtLnRpdGxlIj5DYXJkIGNvbnRlbnQ8L2EtY2FyZD4KICAgICAgPC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGRhdGEgPSBbCiAgewogICAgdGl0bGU6ICdUaXRsZSAxJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgMicsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDMnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSA0JywKICB9LApdOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(k,{grid:{gutter:16,column:4},"data-source":p.data},{renderItem:s(({item:r})=>[e(u,null,{default:s(()=>[e(l,{title:r.title},{default:s(()=>a[0]||(a[0]=[n("Card content")])),_:2,__:[0]},1032,["title"])]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[1]||(a[1]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},":grid"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ gutter: 16, column: 4 }"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-card")]),n(),t("span",{class:"token attr-name"},":title"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Card content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-card")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"interface"),n(),t("span",{class:"token class-name"},"DataItem"),n(),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(" string"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"data"),t("span",{class:"token operator"},":"),n(" DataItem"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},":grid"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ gutter: 16, column: 4 }"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-card")]),n(),t("span",{class:"token attr-name"},":title"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Card content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-card")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(" data "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var at=C(tt,[["render",nt]]);const st=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"},{title:"Title 5"},{title:"Title 6"}],ot=y({setup(){return{data:st}}});function et(p,a,d,m,A,h){const l=o("a-card"),u=o("a-list-item"),k=o("a-list"),c=o("demo-box");return i(),I(c,{jsfiddle:{us:"Responsive grid list. The size property is as same as [Layout Grid](https://www.antdv.com/components/grid/#Col).",cn:"\u54CD\u5E94\u5F0F\u7684\u6805\u683C\u5217\u8868\u3002\u5C3A\u5BF8\u4E0E [Layout Grid](https://www.antdv.com/components/grid-cn/#Col) \u4FDD\u6301\u4E00\u81F4\u3002",docHtml:`<h2 id="zh-cn">zh-CN</h2>
<p>\u54CD\u5E94\u5F0F\u7684\u6805\u683C\u5217\u8868\u3002\u5C3A\u5BF8\u4E0E <a href="https://www.antdv.com/components/grid-cn/#Col" target="_blank" rel="noopener noreferrer">Layout Grid</a> \u4FDD\u6301\u4E00\u81F4\u3002</p>
<h2 id="en-us">en-US</h2>
<p>Responsive grid list. The size property is as same as <a href="https://www.antdv.com/components/grid/#Col" target="_blank" rel="noopener noreferrer">Layout Grid</a>.</p>
`,order:5,title:{"zh-CN":"\u54CD\u5E94\u5F0F\u7684\u6805\u683C\u5217\u8868","en-US":"Responsive grid list"},relativePath:"src/docs/list/demo/resposive.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgeHM6IDEsIHNtOiAyLCBtZDogNCwgbGc6IDQsIHhsOiA2LCB4eGw6IDMgfSIgOmRhdGEtc291cmNlPSJkYXRhIj4KICAgIDx0ZW1wbGF0ZSAjcmVuZGVySXRlbT0ieyBpdGVtIH0iPgogICAgICA8YS1saXN0LWl0ZW0+CiAgICAgICAgPGEtY2FyZCA6dGl0bGU9Iml0ZW0udGl0bGUiPkNhcmQgY29udGVudDwvYS1jYXJkPgogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmludGVyZmFjZSBEYXRhSXRlbSB7CiAgdGl0bGU6IHN0cmluZzsKfQpjb25zdCBkYXRhOiBEYXRhSXRlbVtdID0gWwogIHsKICAgIHRpdGxlOiAnVGl0bGUgMScsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDInLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSAzJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgNCcsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDUnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSA2JywKICB9LApdOwoKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIHJldHVybiB7CiAgICAgIGRhdGEsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgeHM6IDEsIHNtOiAyLCBtZDogNCwgbGc6IDQsIHhsOiA2LCB4eGw6IDMgfSIgOmRhdGEtc291cmNlPSJkYXRhIj4KICAgIDx0ZW1wbGF0ZSAjcmVuZGVySXRlbT0ieyBpdGVtIH0iPgogICAgICA8YS1saXN0LWl0ZW0+CiAgICAgICAgPGEtY2FyZCA6dGl0bGU9Iml0ZW0udGl0bGUiPkNhcmQgY29udGVudDwvYS1jYXJkPgogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKY29uc3QgZGF0YSA9IFsKICB7CiAgICB0aXRsZTogJ1RpdGxlIDEnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSAyJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgMycsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDQnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSA1JywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgNicsCiAgfSwKXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIHJldHVybiB7CiAgICAgIGRhdGEsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[e(k,{grid:{gutter:16,xs:1,sm:2,md:4,lg:4,xl:6,xxl:3},"data-source":p.data},{renderItem:s(({item:r})=>[e(u,null,{default:s(()=>[e(l,{title:r.title},{default:s(()=>a[0]||(a[0]=[n("Card content")])),_:2,__:[0]},1032,["title"])]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[1]||(a[1]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},":grid"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-card")]),n(),t("span",{class:"token attr-name"},":title"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Card content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-card")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),n(),t("span",{class:"token attr-name"},"lang"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("ts"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"interface"),n(),t("span",{class:"token class-name"},"DataItem"),n(),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(" string"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token punctuation"},"}"),n(`
`),t("span",{class:"token keyword"},"const"),n(),t("span",{class:"token literal-property property"},"data"),t("span",{class:"token operator"},":"),n(" DataItem"),t("span",{class:"token punctuation"},"["),t("span",{class:"token punctuation"},"]"),n(),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 5'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 6'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`

`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[t("pre",{class:"language-vue"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list")]),n(),t("span",{class:"token attr-name"},":grid"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"),t("span",{class:"token punctuation"},'"')]),n(),t("span",{class:"token attr-name"},":data-source"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("data"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("template")]),n(),t("span",{class:"token attr-name"},"#renderItem"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("{ item }"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
        `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("a-card")]),n(),t("span",{class:"token attr-name"},":title"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),n("item.title"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),n("Card content"),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-card")]),t("span",{class:"token punctuation"},">")]),n(`
      `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list-item")]),t("span",{class:"token punctuation"},">")]),n(`
    `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("a-list")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("template")]),t("span",{class:"token punctuation"},">")]),n(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),n("script")]),t("span",{class:"token punctuation"},">")]),t("span",{class:"token script"},[t("span",{class:"token language-javascript"},[n(`
`),t("span",{class:"token keyword"},"import"),n(),t("span",{class:"token punctuation"},"{"),n(" defineComponent "),t("span",{class:"token punctuation"},"}"),n(),t("span",{class:"token keyword"},"from"),n(),t("span",{class:"token string"},"'vue'"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"const"),n(" data "),t("span",{class:"token operator"},"="),n(),t("span",{class:"token punctuation"},"["),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 1'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 2'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 3'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 4'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 5'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token literal-property property"},"title"),t("span",{class:"token operator"},":"),n(),t("span",{class:"token string"},"'Title 6'"),t("span",{class:"token punctuation"},","),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"]"),t("span",{class:"token punctuation"},";"),n(`
`),t("span",{class:"token keyword"},"export"),n(),t("span",{class:"token keyword"},"default"),n(),t("span",{class:"token function"},"defineComponent"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},"{"),n(`
  `),t("span",{class:"token function"},"setup"),t("span",{class:"token punctuation"},"("),t("span",{class:"token punctuation"},")"),n(),t("span",{class:"token punctuation"},"{"),n(`
    `),t("span",{class:"token keyword"},"return"),n(),t("span",{class:"token punctuation"},"{"),n(`
      data`),t("span",{class:"token punctuation"},","),n(`
    `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},";"),n(`
  `),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},","),n(`
`),t("span",{class:"token punctuation"},"}"),t("span",{class:"token punctuation"},")"),t("span",{class:"token punctuation"},";"),n(`
`)])]),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),n("script")]),t("span",{class:"token punctuation"},">")]),n(`
`)])],-1)])),_:1})}var pt=C(ot,[["render",et]]);const ct={pageData:{title:"List",description:"",frontmatter:{category:"Components",type:"\u6570\u636E\u5C55\u793A",title:"List",subtitle:"\u5217\u8868",cover:"https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u6700\u57FA\u7840\u7684\u5217\u8868\u5C55\u793A\uFF0C\u53EF\u627F\u8F7D\u6587\u5B57\u3001\u5217\u8868\u3001\u56FE\u7247\u3001\u6BB5\u843D\uFF0C\u5E38\u7528\u4E8E\u540E\u53F0\u6570\u636E\u5C55\u793A\u9875\u9762\u3002"},{level:2,title:"API",slug:"api",content:"List"},{level:3,title:"List",slug:"list",content:""},{level:3,title:"pagination",slug:"pagination",content:"\u5206\u9875\u7684\u914D\u7F6E\u9879\u3002"},{level:3,title:"List grid props",slug:"list-grid-props",content:""},{level:3,title:"List.Item",slug:"list-item",content:""},{level:3,title:"List.Item.Meta",slug:"list-item-meta",content:""}],relativePath:"src/docs/list/index.zh-CN.md",content:`
\u901A\u7528\u5217\u8868\u3002

## \u4F55\u65F6\u4F7F\u7528

\u6700\u57FA\u7840\u7684\u5217\u8868\u5C55\u793A\uFF0C\u53EF\u627F\u8F7D\u6587\u5B57\u3001\u5217\u8868\u3001\u56FE\u7247\u3001\u6BB5\u843D\uFF0C\u5E38\u7528\u4E8E\u540E\u53F0\u6570\u636E\u5C55\u793A\u9875\u9762\u3002

## API

### List

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
| --- | --- | --- | --- | --- |
| bordered | \u662F\u5426\u5C55\u793A\u8FB9\u6846 | boolean | false |  |
| footer | \u5217\u8868\u5E95\u90E8 | string\\|slot | - |  |
| grid | \u5217\u8868\u6805\u683C\u914D\u7F6E | object | - |  |
| header | \u5217\u8868\u5934\u90E8 | string\\|slot | - |  |
| itemLayout | \u8BBE\u7F6E \`List.Item\` \u5E03\u5C40, \u8BBE\u7F6E\u6210 \`vertical\` \u5219\u7AD6\u76F4\u6837\u5F0F\u663E\u793A, \u9ED8\u8BA4\u6A2A\u6392 | string | - |  |
| loading | \u5F53\u5361\u7247\u5185\u5BB9\u8FD8\u5728\u52A0\u8F7D\u4E2D\u65F6\uFF0C\u53EF\u4EE5\u7528 \`loading\` \u5C55\u793A\u4E00\u4E2A\u5360\u4F4D | boolean\\|[object](https://www.antdv.com/components/spin-cn/#API) | false |  |
| loadMore | \u52A0\u8F7D\u66F4\u591A | string\\|slot | - |  |
| locale | \u9ED8\u8BA4\u6587\u6848\u8BBE\u7F6E\uFF0C\u76EE\u524D\u5305\u62EC\u7A7A\u6570\u636E\u6587\u6848 | object | emptyText: &#39;\u6682\u65E0\u6570\u636E&#39; |  |
| pagination | \u5BF9\u5E94\u7684 \`pagination\` [\u914D\u7F6E](https://www.antdv.com/components/pagination-cn/#API), \u8BBE\u7F6E \`false\` \u4E0D\u663E\u793A | boolean\\|object | false |  |
| size | list \u7684\u5C3A\u5BF8 | \`default\` \\| \`middle\` \\| \`small\` | \`default\` |  |
| split | \u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF | boolean | true |  |
| dataSource | \u5217\u8868\u6570\u636E\u6E90 | any[] | - | 1.5.0 |
| renderItem | \u81EA\u5B9A\u4E49\`Item\`\u51FD\u6570\uFF0C\u4E5F\u53EF\u4F7F\u7528 #renderItem=&quot;{item, index}&quot; | ({item, index}) =&gt; vNode |  | - |  |
| rowKey | \u5404\u9879 key \u7684\u53D6\u503C\uFF0C\u53EF\u4EE5\u662F\u5B57\u7B26\u4E32\u6216\u4E00\u4E2A\u51FD\u6570 | item =&gt; string\\|number |  |  |

### pagination

\u5206\u9875\u7684\u914D\u7F6E\u9879\u3002

| \u53C2\u6570     | \u8BF4\u660E               | \u7C7B\u578B                        | \u9ED8\u8BA4\u503C   |
| -------- | ------------------ | --------------------------- | -------- |
| position | \u6307\u5B9A\u5206\u9875\u663E\u793A\u7684\u4F4D\u7F6E | &#39;top&#39; \\| &#39;bottom&#39; \\| &#39;both&#39; | &#39;bottom&#39; |

\u66F4\u591A\u914D\u7F6E\u9879\uFF0C\u8BF7\u67E5\u770B [\`Pagination\`](https://www.antdv.com/components/pagination-cn/#API)\u3002

### List grid props

| \u53C2\u6570   | \u8BF4\u660E                 | \u7C7B\u578B                                     | \u9ED8\u8BA4\u503C |
| ------ | -------------------- | ---------------------------------------- | ------ |
| column | \u5217\u6570                 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -      |
| gutter | \u6805\u683C\u95F4\u9694             | number                                   | 0      |
| xs     | \`&lt;576px\` \u5C55\u793A\u7684\u5217\u6570  | number                                   | -      |
| sm     | \`\u2265576px\` \u5C55\u793A\u7684\u5217\u6570  | number                                   | -      |
| md     | \`\u2265768px\` \u5C55\u793A\u7684\u5217\u6570  | number                                   | -      |
| lg     | \`\u2265992px\` \u5C55\u793A\u7684\u5217\u6570  | number                                   | -      |
| xl     | \`\u22651200px\` \u5C55\u793A\u7684\u5217\u6570 | number                                   | -      |
| xxl    | \`\u22651600px\` \u5C55\u793A\u7684\u5217\u6570 | number                                   | -      |

### List.Item

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
| --- | --- | --- | --- |
| actions | \u5217\u8868\u64CD\u4F5C\u7EC4\uFF0C\u6839\u636E \`itemLayout\` \u7684\u4E0D\u540C, \u4F4D\u7F6E\u5728\u5361\u7247\u5E95\u90E8\u6216\u8005\u6700\u53F3\u4FA7 | Array\\&lt;vNode&gt;/ | slot | - |
| extra | \u989D\u5916\u5185\u5BB9, \u901A\u5E38\u7528\u5728 \`itemLayout\` \u4E3A \`vertical\` \u7684\u60C5\u51B5\u4E0B, \u5C55\u793A\u53F3\u4FA7\u5185\u5BB9; \`horizontal\` \u5C55\u793A\u5728\u5217\u8868\u5143\u7D20\u6700\u53F3\u4FA7 | string\\|slot | - |

### List.Item.Meta

| \u53C2\u6570        | \u8BF4\u660E               | \u7C7B\u578B         | \u9ED8\u8BA4\u503C |
| ----------- | ------------------ | ------------ | ------ |
| avatar      | \u5217\u8868\u5143\u7D20\u7684\u56FE\u6807     | slot         | -      |
| description | \u5217\u8868\u5143\u7D20\u7684\u63CF\u8FF0\u5185\u5BB9 | string\\|slot | -      |
| title       | \u5217\u8868\u5143\u7D20\u7684\u6807\u9898     | string\\|slot | -      |
`,html:`<p>\u901A\u7528\u5217\u8868\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2>
<p>\u6700\u57FA\u7840\u7684\u5217\u8868\u5C55\u793A\uFF0C\u53EF\u627F\u8F7D\u6587\u5B57\u3001\u5217\u8868\u3001\u56FE\u7247\u3001\u6BB5\u843D\uFF0C\u5E38\u7528\u4E8E\u540E\u53F0\u6570\u636E\u5C55\u793A\u9875\u9762\u3002</p>
<h2 id="api">API</h2>
<h3 id="list">List</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>bordered</td>
<td>\u662F\u5426\u5C55\u793A\u8FB9\u6846</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>footer</td>
<td>\u5217\u8868\u5E95\u90E8</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>grid</td>
<td>\u5217\u8868\u6805\u683C\u914D\u7F6E</td>
<td>object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>header</td>
<td>\u5217\u8868\u5934\u90E8</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>itemLayout</td>
<td>\u8BBE\u7F6E <code>List.Item</code> \u5E03\u5C40, \u8BBE\u7F6E\u6210 <code>vertical</code> \u5219\u7AD6\u76F4\u6837\u5F0F\u663E\u793A, \u9ED8\u8BA4\u6A2A\u6392</td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>loading</td>
<td>\u5F53\u5361\u7247\u5185\u5BB9\u8FD8\u5728\u52A0\u8F7D\u4E2D\u65F6\uFF0C\u53EF\u4EE5\u7528 <code>loading</code> \u5C55\u793A\u4E00\u4E2A\u5360\u4F4D</td>
<td>boolean|<a href="https://www.antdv.com/components/spin-cn/#API" target="_blank" rel="noopener noreferrer">object</a></td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>loadMore</td>
<td>\u52A0\u8F7D\u66F4\u591A</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>locale</td>
<td>\u9ED8\u8BA4\u6587\u6848\u8BBE\u7F6E\uFF0C\u76EE\u524D\u5305\u62EC\u7A7A\u6570\u636E\u6587\u6848</td>
<td>object</td>
<td>emptyText: '\u6682\u65E0\u6570\u636E'</td>
<td></td>
</tr>
<tr>
<td>pagination</td>
<td>\u5BF9\u5E94\u7684 <code>pagination</code> <a href="https://www.antdv.com/components/pagination-cn/#API" target="_blank" rel="noopener noreferrer">\u914D\u7F6E</a>, \u8BBE\u7F6E <code>false</code> \u4E0D\u663E\u793A</td>
<td>boolean|object</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>size</td>
<td>list \u7684\u5C3A\u5BF8</td>
<td><code>default</code> | <code>middle</code> | <code>small</code></td>
<td><code>default</code></td>
<td></td>
</tr>
<tr>
<td>split</td>
<td>\u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>dataSource</td>
<td>\u5217\u8868\u6570\u636E\u6E90</td>
<td>any[]</td>
<td>-</td>
<td>1.5.0</td>
</tr>
<tr>
<td>renderItem</td>
<td>\u81EA\u5B9A\u4E49<code>Item</code>\u51FD\u6570\uFF0C\u4E5F\u53EF\u4F7F\u7528 #renderItem=&quot;{item, index}&quot;</td>
<td>({item, index}) =&gt; vNode</td>
<td></td>
<td>-</td>
</tr>
<tr>
<td>rowKey</td>
<td>\u5404\u9879 key \u7684\u53D6\u503C\uFF0C\u53EF\u4EE5\u662F\u5B57\u7B26\u4E32\u6216\u4E00\u4E2A\u51FD\u6570</td>
<td>item =&gt; string|number</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="pagination">pagination</h3>
<p>\u5206\u9875\u7684\u914D\u7F6E\u9879\u3002</p>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>\u6307\u5B9A\u5206\u9875\u663E\u793A\u7684\u4F4D\u7F6E</td>
<td>'top' | 'bottom' | 'both'</td>
<td>'bottom'</td>
</tr>
</tbody>
</table>
<p>\u66F4\u591A\u914D\u7F6E\u9879\uFF0C\u8BF7\u67E5\u770B <a href="https://www.antdv.com/components/pagination-cn/#API" target="_blank" rel="noopener noreferrer"><code>Pagination</code></a>\u3002</p>
<h3 id="list-grid-props">List grid props</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>column</td>
<td>\u5217\u6570</td>
<td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td>
<td>-</td>
</tr>
<tr>
<td>gutter</td>
<td>\u6805\u683C\u95F4\u9694</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="list-item">List.Item</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>actions</td>
<td>\u5217\u8868\u64CD\u4F5C\u7EC4\uFF0C\u6839\u636E <code>itemLayout</code> \u7684\u4E0D\u540C, \u4F4D\u7F6E\u5728\u5361\u7247\u5E95\u90E8\u6216\u8005\u6700\u53F3\u4FA7</td>
<td>Array&lt;vNode&gt;/</td>
<td>slot</td>
</tr>
<tr>
<td>extra</td>
<td>\u989D\u5916\u5185\u5BB9, \u901A\u5E38\u7528\u5728 <code>itemLayout</code> \u4E3A <code>vertical</code> \u7684\u60C5\u51B5\u4E0B, \u5C55\u793A\u53F3\u4FA7\u5185\u5BB9; <code>horizontal</code> \u5C55\u793A\u5728\u5217\u8868\u5143\u7D20\u6700\u53F3\u4FA7</td>
<td>string|slot</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="list-item-meta">List.Item.Meta</h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>\u5217\u8868\u5143\u7D20\u7684\u56FE\u6807</td>
<td>slot</td>
<td>-</td>
</tr>
<tr>
<td>description</td>
<td>\u5217\u8868\u5143\u7D20\u7684\u63CF\u8FF0\u5185\u5BB9</td>
<td>string|slot</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>\u5217\u8868\u5143\u7D20\u7684\u6807\u9898</td>
<td>string|slot</td>
<td>-</td>
</tr>
</tbody>
</table>
`,lastUpdated:1748059052695}},lt={class:"markdown"};function ut(p,a,d,m,A,h){return i(),G("article",lt,a[0]||(a[0]=[f('<p>\u901A\u7528\u5217\u8868\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528</h2><p>\u6700\u57FA\u7840\u7684\u5217\u8868\u5C55\u793A\uFF0C\u53EF\u627F\u8F7D\u6587\u5B57\u3001\u5217\u8868\u3001\u56FE\u7247\u3001\u6BB5\u843D\uFF0C\u5E38\u7528\u4E8E\u540E\u53F0\u6570\u636E\u5C55\u793A\u9875\u9762\u3002</p><h2 id="api">API</h2><h3 id="list">List</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>bordered</td><td>\u662F\u5426\u5C55\u793A\u8FB9\u6846</td><td>boolean</td><td>false</td><td></td></tr><tr><td>footer</td><td>\u5217\u8868\u5E95\u90E8</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>grid</td><td>\u5217\u8868\u6805\u683C\u914D\u7F6E</td><td>object</td><td>-</td><td></td></tr><tr><td>header</td><td>\u5217\u8868\u5934\u90E8</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>itemLayout</td><td>\u8BBE\u7F6E <code>List.Item</code> \u5E03\u5C40, \u8BBE\u7F6E\u6210 <code>vertical</code> \u5219\u7AD6\u76F4\u6837\u5F0F\u663E\u793A, \u9ED8\u8BA4\u6A2A\u6392</td><td>string</td><td>-</td><td></td></tr><tr><td>loading</td><td>\u5F53\u5361\u7247\u5185\u5BB9\u8FD8\u5728\u52A0\u8F7D\u4E2D\u65F6\uFF0C\u53EF\u4EE5\u7528 <code>loading</code> \u5C55\u793A\u4E00\u4E2A\u5360\u4F4D</td><td>boolean|<a href="https://www.antdv.com/components/spin-cn/#API" target="_blank" rel="noopener noreferrer">object</a></td><td>false</td><td></td></tr><tr><td>loadMore</td><td>\u52A0\u8F7D\u66F4\u591A</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>locale</td><td>\u9ED8\u8BA4\u6587\u6848\u8BBE\u7F6E\uFF0C\u76EE\u524D\u5305\u62EC\u7A7A\u6570\u636E\u6587\u6848</td><td>object</td><td>emptyText: &#39;\u6682\u65E0\u6570\u636E&#39;</td><td></td></tr><tr><td>pagination</td><td>\u5BF9\u5E94\u7684 <code>pagination</code> <a href="https://www.antdv.com/components/pagination-cn/#API" target="_blank" rel="noopener noreferrer">\u914D\u7F6E</a>, \u8BBE\u7F6E <code>false</code> \u4E0D\u663E\u793A</td><td>boolean|object</td><td>false</td><td></td></tr><tr><td>size</td><td>list \u7684\u5C3A\u5BF8</td><td><code>default</code> | <code>middle</code> | <code>small</code></td><td><code>default</code></td><td></td></tr><tr><td>split</td><td>\u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF</td><td>boolean</td><td>true</td><td></td></tr><tr><td>dataSource</td><td>\u5217\u8868\u6570\u636E\u6E90</td><td>any[]</td><td>-</td><td>1.5.0</td></tr><tr><td>renderItem</td><td>\u81EA\u5B9A\u4E49<code>Item</code>\u51FD\u6570\uFF0C\u4E5F\u53EF\u4F7F\u7528 #renderItem=&quot;{item, index}&quot;</td><td>({item, index}) =&gt; vNode</td><td></td><td>-</td></tr><tr><td>rowKey</td><td>\u5404\u9879 key \u7684\u53D6\u503C\uFF0C\u53EF\u4EE5\u662F\u5B57\u7B26\u4E32\u6216\u4E00\u4E2A\u51FD\u6570</td><td>item =&gt; string|number</td><td></td><td></td></tr></tbody></table><h3 id="pagination">pagination</h3><p>\u5206\u9875\u7684\u914D\u7F6E\u9879\u3002</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>position</td><td>\u6307\u5B9A\u5206\u9875\u663E\u793A\u7684\u4F4D\u7F6E</td><td>&#39;top&#39; | &#39;bottom&#39; | &#39;both&#39;</td><td>&#39;bottom&#39;</td></tr></tbody></table><p>\u66F4\u591A\u914D\u7F6E\u9879\uFF0C\u8BF7\u67E5\u770B <a href="https://www.antdv.com/components/pagination-cn/#API" target="_blank" rel="noopener noreferrer"><code>Pagination</code></a>\u3002</p><h3 id="list-grid-props">List grid props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>column</td><td>\u5217\u6570</td><td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td><td>-</td></tr><tr><td>gutter</td><td>\u6805\u683C\u95F4\u9694</td><td>number</td><td>0</td></tr><tr><td>xs</td><td><code>&lt;576px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr><tr><td>sm</td><td><code>\u2265576px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr><tr><td>md</td><td><code>\u2265768px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr><tr><td>lg</td><td><code>\u2265992px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr><tr><td>xl</td><td><code>\u22651200px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr><tr><td>xxl</td><td><code>\u22651600px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td></tr></tbody></table><h3 id="list-item">List.Item</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>actions</td><td>\u5217\u8868\u64CD\u4F5C\u7EC4\uFF0C\u6839\u636E <code>itemLayout</code> \u7684\u4E0D\u540C, \u4F4D\u7F6E\u5728\u5361\u7247\u5E95\u90E8\u6216\u8005\u6700\u53F3\u4FA7</td><td>Array&lt;vNode&gt;/</td><td>slot</td></tr><tr><td>extra</td><td>\u989D\u5916\u5185\u5BB9, \u901A\u5E38\u7528\u5728 <code>itemLayout</code> \u4E3A <code>vertical</code> \u7684\u60C5\u51B5\u4E0B, \u5C55\u793A\u53F3\u4FA7\u5185\u5BB9; <code>horizontal</code> \u5C55\u793A\u5728\u5217\u8868\u5143\u7D20\u6700\u53F3\u4FA7</td><td>string|slot</td><td>-</td></tr></tbody></table><h3 id="list-item-meta">List.Item.Meta</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>avatar</td><td>\u5217\u8868\u5143\u7D20\u7684\u56FE\u6807</td><td>slot</td><td>-</td></tr><tr><td>description</td><td>\u5217\u8868\u5143\u7D20\u7684\u63CF\u8FF0\u5185\u5BB9</td><td>string|slot</td><td>-</td></tr><tr><td>title</td><td>\u5217\u8868\u5143\u7D20\u7684\u6807\u9898</td><td>string|slot</td><td>-</td></tr></tbody></table>',16)]))}var it=C(ct,[["render",ut]]);const kt={pageData:{title:"List",description:"",frontmatter:{category:"Components",type:"Data Display",title:"List",cover:"https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg"},headers:[{level:2,title:"When To Use",slug:"when-to-use",content:"A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size."},{level:2,title:"API",slug:"api",content:"List"},{level:3,title:"List",slug:"list",content:""},{level:3,title:"pagination",slug:"pagination",content:"Properties for pagination."},{level:3,title:"List grid props",slug:"list-grid-props",content:""},{level:3,title:"List.Item",slug:"list-item",content:""},{level:3,title:"List.Item.Meta",slug:"list-item-meta",content:""}],relativePath:"src/docs/list/index.en-US.md",content:`
Simple List.

## When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

## API

### List

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |  |
| footer | List footer renderer | string\\|slot | - |  |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |  |
| header | List header renderer | string\\|slot | - |  |
| itemLayout | The layout of list, default is \`horizontal\`, If a vertical list is desired, set the itemLayout property to \`vertical\` | string | - |  |
| rowKey | Item&#39;s unique key, could be a string or function that returns a string | string\\|Function(record):string | \`key\` |  |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\\|[object](https://www.antdv.com/components/spin/#API) | false |  |
| loadMore | Shows a load more content | string\\|slot | - |  |
| locale | i18n text including empty text | object | emptyText: &#39;No Data&#39; &lt;br&gt; |  |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \\| object | false |  |
| split | Toggles rendering of the split under the list item | boolean | true |  |
| dataSource | dataSource array for list | any[] | - | 3.20.1 |
| renderItem | Custom item renderer, #renderItem=&quot;{item, index}&quot; | ({item, index}) =&gt; vNode |  | - |  |

### pagination

Properties for pagination.

| Property | Description                          | Type                        | Default  |
| -------- | ------------------------------------ | --------------------------- | -------- |
| position | specify the position of \`Pagination\` | &#39;top&#39; \\| &#39;bottom&#39; \\| &#39;both&#39; | &#39;bottom&#39; |

More about pagination, please check [\`Pagination\`](https://www.antdv.com/components/pagination/#API).

### List grid props

| Property | Description              | Type                                     | Default   |
| -------- | ------------------------ | ---------------------------------------- | --------- |
| column   | column of grid           | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -         |
| gutter   | spacing between grid     | number                                   | 0         |
| size     | Size of list             | \`default\` \\| \`middle\` \\| \`small\`         | \`default\` |
| xs       | \`&lt;576px\` column of grid  | number                                   | -         |
| sm       | \`\u2265576px\` column of grid  | number                                   | -         |
| md       | \`\u2265768px\` column of grid  | number                                   | -         |
| lg       | \`\u2265992px\` column of grid  | number                                   | -         |
| xl       | \`\u22651200px\` column of grid | number                                   | -         |
| xxl      | \`\u22651600px\` column of grid | number                                   | -         |

### List.Item

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| actions | The actions content of list item. If \`itemLayout\` is \`vertical\`, shows the content on bottom, otherwise shows content on the far right. | Array\\&lt;vNode&gt;\\|slot | - |
| extra | The extra content of list item. If \`itemLayout\` is \`vertical\`, shows the content on right, otherwise shows content on the far right. | string\\|slot | - |

### List.Item.Meta

| Property    | Description                  | Type         | Default |
| ----------- | ---------------------------- | ------------ | ------- |
| avatar      | The avatar of list item      | slot         | -       |
| description | The description of list item | string\\|slot | -       |
| title       | The title of list item       | string\\|slot | -       |
`,html:`<p>Simple List.</p>
<h2 id="when-to-use">When To Use</h2>
<p>A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.</p>
<h2 id="api">API</h2>
<h3 id="list">List</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>bordered</td>
<td>Toggles rendering of the border around the list</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>footer</td>
<td>List footer renderer</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>grid</td>
<td>The grid type of list. You can set grid to something like {gutter: 16, column: 4}</td>
<td>object</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>header</td>
<td>List header renderer</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>itemLayout</td>
<td>The layout of list, default is <code>horizontal</code>, If a vertical list is desired, set the itemLayout property to <code>vertical</code></td>
<td>string</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>rowKey</td>
<td>Item's unique key, could be a string or function that returns a string</td>
<td>string|Function(record):string</td>
<td><code>key</code></td>
<td></td>
</tr>
<tr>
<td>loading</td>
<td>Shows a loading indicator while the contents of the list are being fetched</td>
<td>boolean|<a href="https://www.antdv.com/components/spin/#API" target="_blank" rel="noopener noreferrer">object</a></td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>loadMore</td>
<td>Shows a load more content</td>
<td>string|slot</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>locale</td>
<td>i18n text including empty text</td>
<td>object</td>
<td>emptyText: 'No Data' <br></td>
<td></td>
</tr>
<tr>
<td>pagination</td>
<td>Pagination <a href="https://www.antdv.com/components/pagination/#API" target="_blank" rel="noopener noreferrer">config</a>, hide it by setting it to false</td>
<td>boolean | object</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>split</td>
<td>Toggles rendering of the split under the list item</td>
<td>boolean</td>
<td>true</td>
<td></td>
</tr>
<tr>
<td>dataSource</td>
<td>dataSource array for list</td>
<td>any[]</td>
<td>-</td>
<td>3.20.1</td>
</tr>
<tr>
<td>renderItem</td>
<td>Custom item renderer, #renderItem=&quot;{item, index}&quot;</td>
<td>({item, index}) =&gt; vNode</td>
<td></td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="pagination">pagination</h3>
<p>Properties for pagination.</p>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>specify the position of <code>Pagination</code></td>
<td>'top' | 'bottom' | 'both'</td>
<td>'bottom'</td>
</tr>
</tbody>
</table>
<p>More about pagination, please check <a href="https://www.antdv.com/components/pagination/#API" target="_blank" rel="noopener noreferrer"><code>Pagination</code></a>.</p>
<h3 id="list-grid-props">List grid props</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>column</td>
<td>column of grid</td>
<td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td>
<td>-</td>
</tr>
<tr>
<td>gutter</td>
<td>spacing between grid</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>size</td>
<td>Size of list</td>
<td><code>default</code> | <code>middle</code> | <code>small</code></td>
<td><code>default</code></td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code> column of grid</td>
<td>number</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="list-item">List.Item</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>actions</td>
<td>The actions content of list item. If <code>itemLayout</code> is <code>vertical</code>, shows the content on bottom, otherwise shows content on the far right.</td>
<td>Array&lt;vNode&gt;|slot</td>
<td>-</td>
</tr>
<tr>
<td>extra</td>
<td>The extra content of list item. If <code>itemLayout</code> is <code>vertical</code>, shows the content on right, otherwise shows content on the far right.</td>
<td>string|slot</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3 id="list-item-meta">List.Item.Meta</h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>The avatar of list item</td>
<td>slot</td>
<td>-</td>
</tr>
<tr>
<td>description</td>
<td>The description of list item</td>
<td>string|slot</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>The title of list item</td>
<td>string|slot</td>
<td>-</td>
</tr>
</tbody>
</table>
`,lastUpdated:1748059052695}},dt={class:"markdown"};function rt(p,a,d,m,A,h){return i(),G("article",dt,a[0]||(a[0]=[f('<p>Simple List.</p><h2 id="when-to-use">When To Use</h2><p>A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.</p><h2 id="api">API</h2><h3 id="list">List</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th></tr></thead><tbody><tr><td>bordered</td><td>Toggles rendering of the border around the list</td><td>boolean</td><td>false</td><td></td></tr><tr><td>footer</td><td>List footer renderer</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>grid</td><td>The grid type of list. You can set grid to something like {gutter: 16, column: 4}</td><td>object</td><td>-</td><td></td></tr><tr><td>header</td><td>List header renderer</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>itemLayout</td><td>The layout of list, default is <code>horizontal</code>, If a vertical list is desired, set the itemLayout property to <code>vertical</code></td><td>string</td><td>-</td><td></td></tr><tr><td>rowKey</td><td>Item&#39;s unique key, could be a string or function that returns a string</td><td>string|Function(record):string</td><td><code>key</code></td><td></td></tr><tr><td>loading</td><td>Shows a loading indicator while the contents of the list are being fetched</td><td>boolean|<a href="https://www.antdv.com/components/spin/#API" target="_blank" rel="noopener noreferrer">object</a></td><td>false</td><td></td></tr><tr><td>loadMore</td><td>Shows a load more content</td><td>string|slot</td><td>-</td><td></td></tr><tr><td>locale</td><td>i18n text including empty text</td><td>object</td><td>emptyText: &#39;No Data&#39; <br></td><td></td></tr><tr><td>pagination</td><td>Pagination <a href="https://www.antdv.com/components/pagination/#API" target="_blank" rel="noopener noreferrer">config</a>, hide it by setting it to false</td><td>boolean | object</td><td>false</td><td></td></tr><tr><td>split</td><td>Toggles rendering of the split under the list item</td><td>boolean</td><td>true</td><td></td></tr><tr><td>dataSource</td><td>dataSource array for list</td><td>any[]</td><td>-</td><td>3.20.1</td></tr><tr><td>renderItem</td><td>Custom item renderer, #renderItem=&quot;{item, index}&quot;</td><td>({item, index}) =&gt; vNode</td><td></td><td>-</td></tr></tbody></table><h3 id="pagination">pagination</h3><p>Properties for pagination.</p><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>position</td><td>specify the position of <code>Pagination</code></td><td>&#39;top&#39; | &#39;bottom&#39; | &#39;both&#39;</td><td>&#39;bottom&#39;</td></tr></tbody></table><p>More about pagination, please check <a href="https://www.antdv.com/components/pagination/#API" target="_blank" rel="noopener noreferrer"><code>Pagination</code></a>.</p><h3 id="list-grid-props">List grid props</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>column</td><td>column of grid</td><td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td><td>-</td></tr><tr><td>gutter</td><td>spacing between grid</td><td>number</td><td>0</td></tr><tr><td>size</td><td>Size of list</td><td><code>default</code> | <code>middle</code> | <code>small</code></td><td><code>default</code></td></tr><tr><td>xs</td><td><code>&lt;576px</code> column of grid</td><td>number</td><td>-</td></tr><tr><td>sm</td><td><code>\u2265576px</code> column of grid</td><td>number</td><td>-</td></tr><tr><td>md</td><td><code>\u2265768px</code> column of grid</td><td>number</td><td>-</td></tr><tr><td>lg</td><td><code>\u2265992px</code> column of grid</td><td>number</td><td>-</td></tr><tr><td>xl</td><td><code>\u22651200px</code> column of grid</td><td>number</td><td>-</td></tr><tr><td>xxl</td><td><code>\u22651600px</code> column of grid</td><td>number</td><td>-</td></tr></tbody></table><h3 id="list-item">List.Item</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>actions</td><td>The actions content of list item. If <code>itemLayout</code> is <code>vertical</code>, shows the content on bottom, otherwise shows content on the far right.</td><td>Array&lt;vNode&gt;|slot</td><td>-</td></tr><tr><td>extra</td><td>The extra content of list item. If <code>itemLayout</code> is <code>vertical</code>, shows the content on right, otherwise shows content on the far right.</td><td>string|slot</td><td>-</td></tr></tbody></table><h3 id="list-item-meta">List.Item.Meta</h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>avatar</td><td>The avatar of list item</td><td>slot</td><td>-</td></tr><tr><td>description</td><td>The description of list item</td><td>string|slot</td><td>-</td></tr><tr><td>title</td><td>The title of list item</td><td>string|slot</td><td>-</td></tr></tbody></table>',16)]))}var gt=C(kt,[["render",rt]]);const mt=y({CN:it,US:gt,components:{Basic:D,Simple:N,Loadmore:Q,Vertical:O,Grid:at,Resposive:pt},setup(){return{}}});function It(p,a,d,m,A,h){const l=o("basic"),u=o("simple"),k=o("loadmore"),c=o("vertical"),r=o("grid"),g=o("resposive");return i(),G(w,null,[e(l),e(u),e(k),e(c),e(r),e(g)],64)}var yt=C(mt,[["render",It]]);export{yt as default};