import{d as y,_ as h,l as b,w as s,j as o,k as g,f as e,b as n,t as A,e as t,r as f,o as R,b9 as L,a as G,x as Y,h as V,m as P,F as X,q as B}from"./index.3fe853a6.js";import{S}from"./StarOutlined.f47b7afb.js";import{M as H}from"./MessageOutlined.c4e56101.js";import{L as F}from"./LikeOutlined.e74c6d35.js";const D=[{title:"Ant Design Title 1"},{title:"Ant Design Title 2"},{title:"Ant Design Title 3"},{title:"Ant Design Title 4"}],z=y({setup(){return{data:D}}}),N={href:"https://www.antdv.com/"};function J(p,a,i,d,C,l){const c=o("a-avatar"),k=o("a-list-item-meta"),r=o("a-list-item"),u=o("a-list"),I=o("demo-box");return g(),b(I,{jsfiddle:{us:"Basic list.",cn:"\u57FA\u7840\u5217\u8868\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u57FA\u7840\u5217\u8868\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Basic list.</p>
`,order:0,title:{"zh-CN":"\u57FA\u672C\u7528\u6CD5","en-US":"Basic usage"},relativePath:"components/list/demo/basic.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9Imhvcml6b250YWwiIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLnRpdGxlIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL2pvZXNjaG1vZS5pby9hcGkvdjEvcmFuZG9tIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW50ZXJmYWNlIERhdGFJdGVtIHsKICB0aXRsZTogc3RyaW5nOwp9CmNvbnN0IGRhdGE6IERhdGFJdGVtW10gPSBbCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDEnLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDInLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDMnLAogIH0sCiAgewogICAgdGl0bGU6ICdBbnQgRGVzaWduIFRpdGxlIDQnLAogIH0sCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9Imhvcml6b250YWwiIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWxpc3QtaXRlbS1tZXRhCiAgICAgICAgICBkZXNjcmlwdGlvbj0iQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbSIKICAgICAgICA+CiAgICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgICA8YSBocmVmPSJodHRwczovL3d3dy5hbnRkdi5jb20vIj57eyBpdGVtLnRpdGxlIH19PC9hPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICA8YS1hdmF0YXIgc3JjPSJodHRwczovL2pvZXNjaG1vZS5pby9hcGkvdjEvcmFuZG9tIiAvPgogICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpjb25zdCBkYXRhID0gW3sKICB0aXRsZTogJ0FudCBEZXNpZ24gVGl0bGUgMScsCn0sIHsKICB0aXRsZTogJ0FudCBEZXNpZ24gVGl0bGUgMicsCn0sIHsKICB0aXRsZTogJ0FudCBEZXNpZ24gVGl0bGUgMycsCn0sIHsKICB0aXRsZTogJ0FudCBEZXNpZ24gVGl0bGUgNCcsCn1dOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(u,{"item-layout":"horizontal","data-source":p.data},{renderItem:s(({item:m})=>[e(r,null,{default:s(()=>[e(k,{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"},{title:s(()=>[n("a",N,A(m.title),1)]),avatar:s(()=>[e(c,{src:"https://joeschmoe.io/api/v1/random"})]),_:2},1024)]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[0]||(a[0]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
          `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Ant Design, a design language for background applications, is refined by Ant UED Team"),n("span",{class:"token punctuation"},'"')]),t(`
        `),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.title }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://joeschmoe.io/api/v1/random"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),t(" DataItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 2'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 3'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 4'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
          `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Ant Design, a design language for background applications, is refined by Ant UED Team"),n("span",{class:"token punctuation"},'"')]),t(`
        `),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.title }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://joeschmoe.io/api/v1/random"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 1'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 2'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 3'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design Title 4'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const T=h(z,[["render",J]]),j=["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."],K=y({setup(){return{data:j}}});function U(p,a,i,d,C,l){const c=o("a-list-item"),k=o("a-list"),r=o("demo-box");return g(),b(r,{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 <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:"components/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+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGRhdGEgPSBbJ1JhY2luZyBjYXIgc3ByYXlzIGJ1cm5pbmcgZnVlbCBpbnRvIGNyb3dkLicsICdKYXBhbmVzZSBwcmluY2VzcyB0byB3ZWQgY29tbW9uZXIuJywgJ0F1c3RyYWxpYW4gd2Fsa3MgMTAwa20gYWZ0ZXIgb3V0YmFjayBjcmFzaC4nLCAnTWFuIGNoYXJnZWQgb3ZlciBtaXNzaW5nIHdlZGRpbmcgZ2lybC4nLCAnTG9zIEFuZ2VsZXMgYmF0dGxlcyBodWdlIHdpbGRmaXJlcy4nXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIHJldHVybiB7CiAgICAgIGRhdGEsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[a[6]||(a[6]=n("h3",{style:{margin:"16px 0"}},"Small Size",-1)),e(k,{size:"small",bordered:"","data-source":p.data},{renderItem:s(({item:u})=>[e(c,null,{default:s(()=>[t(A(u),1)]),_:2},1024)]),header:s(()=>a[0]||(a[0]=[n("div",null,"Header",-1)])),footer:s(()=>a[1]||(a[1]=[n("div",null,"Footer",-1)])),_:1},8,["data-source"]),a[7]||(a[7]=n("h3",{style:{marginBottom:"16px"}},"Default Size",-1)),e(k,{bordered:"","data-source":p.data},{renderItem:s(({item:u})=>[e(c,null,{default:s(()=>[t(A(u),1)]),_:2},1024)]),header:s(()=>a[2]||(a[2]=[n("div",null,"Header",-1)])),footer:s(()=>a[3]||(a[3]=[n("div",null,"Footer",-1)])),_:1},8,["data-source"]),a[8]||(a[8]=n("h3",{style:{margin:"16px 0"}},"Large Size",-1)),e(k,{size:"large",bordered:"","data-source":p.data},{renderItem:s(({item:u})=>[e(c,null,{default:s(()=>[t(A(u),1)]),_:2},1024)]),header:s(()=>a[4]||(a[4]=[n("div",null,"Header",-1)])),footer:s(()=>a[5]||(a[5]=[n("div",null,"Footer",-1)])),_:1},8,["data-source"])]),htmlCode:s(()=>a[9]||(a[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ margin: '16px 0' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Small Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("small"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ marginBottom: '16px' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Default Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ margin: '16px 0' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Large Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token string"},"'Racing car sprays burning fuel into crowd.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token string"},"'Japanese princess to wed commoner.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token string"},"'Australian walks 100km after outback crash.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token string"},"'Man charged over missing wedding girl.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token string"},"'Los Angeles battles huge wildfires.'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[10]||(a[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ margin: '16px 0' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Small Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("small"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ marginBottom: '16px' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Default Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("h3")]),t(),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ margin: '16px 0' }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Large Size"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("h3")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"bordered"),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t("{{ item }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#header"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Header"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("Footer"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'Racing car sprays burning fuel into crowd.'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'Japanese princess to wed commoner.'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'Australian walks 100km after outback crash.'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'Man charged over missing wedding girl.'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'Los Angeles battles huge wildfires.'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const E=h(K,[["render",U]]),W=3,w=`https://randomuser.me/api/?results=${W}&inc=name,gender,email,nat,picture&noinfo`,Q=y({setup(){const p=f(!0),a=f(!1),i=f([]),d=f([]);return R(()=>{fetch(w).then(l=>l.json()).then(l=>{p.value=!1,i.value=l.results,d.value=l.results})}),{loading:a,initLoading:p,data:i,list:d,onLoadMore:()=>{a.value=!0,d.value=i.value.concat([...new Array(W)].map(()=>({loading:!0,name:{},picture:{}}))),fetch(w).then(l=>l.json()).then(l=>{const c=i.value.concat(l.results);a.value=!1,i.value=c,d.value=c,L(()=>{window.dispatchEvent(new Event("resize"))})})}}}});const M={key:0,style:{textAlign:"center",marginTop:"12px",height:"32px",lineHeight:"32px"}},_={href:"https://www.antdv.com/"};function q(p,a,i,d,C,l){const c=o("a-button"),k=o("a-avatar"),r=o("a-list-item-meta"),u=o("a-skeleton"),I=o("a-list-item"),m=o("a-list"),Z=o("demo-box");return g(),b(Z,{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 <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:"components/list/demo/loadmore.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIGNsYXNzPSJkZW1vLWxvYWRtb3JlLWxpc3QiCiAgICA6bG9hZGluZz0iaW5pdExvYWRpbmciCiAgICBpdGVtLWxheW91dD0iaG9yaXpvbnRhbCIKICAgIDpkYXRhLXNvdXJjZT0ibGlzdCIKICA+CiAgICA8dGVtcGxhdGUgI2xvYWRNb3JlPgogICAgICA8ZGl2CiAgICAgICAgdi1pZj0iIWluaXRMb2FkaW5nICYmICFsb2FkaW5nIgogICAgICAgIDpzdHlsZT0ieyB0ZXh0QWxpZ246ICdjZW50ZXInLCBtYXJnaW5Ub3A6ICcxMnB4JywgaGVpZ2h0OiAnMzJweCcsIGxpbmVIZWlnaHQ6ICczMnB4JyB9IgogICAgICA+CiAgICAgICAgPGEtYnV0dG9uIEBjbGljaz0ib25Mb2FkTW9yZSI+bG9hZGluZyBtb3JlPC9hLWJ1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8dGVtcGxhdGUgI2FjdGlvbnM+CiAgICAgICAgICA8YSBrZXk9Imxpc3QtbG9hZG1vcmUtZWRpdCI+ZWRpdDwvYT4KICAgICAgICAgIDxhIGtleT0ibGlzdC1sb2FkbW9yZS1tb3JlIj5tb3JlPC9hPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtc2tlbGV0b24gYXZhdGFyIDp0aXRsZT0iZmFsc2UiIDpsb2FkaW5nPSIhIWl0ZW0ubG9hZGluZyIgYWN0aXZlPgogICAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEKICAgICAgICAgICAgZGVzY3JpcHRpb249IkFudCBEZXNpZ24sIGEgZGVzaWduIGxhbmd1YWdlIGZvciBiYWNrZ3JvdW5kIGFwcGxpY2F0aW9ucywgaXMgcmVmaW5lZCBieSBBbnQgVUVEIFRlYW0iCiAgICAgICAgICA+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgICAgPGEgaHJlZj0iaHR0cHM6Ly93d3cuYW50ZHYuY29tLyI+e3sgaXRlbS5uYW1lLmxhc3QgfX08L2E+CiAgICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICAgIDxhLWF2YXRhciA6c3JjPSJpdGVtLnBpY3R1cmUubGFyZ2UiIC8+CiAgICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgICAgICA8ZGl2PmNvbnRlbnQ8L2Rpdj4KICAgICAgICA8L2Etc2tlbGV0b24+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCBvbk1vdW50ZWQsIHJlZiwgbmV4dFRpY2sgfSBmcm9tICd2dWUnOwpjb25zdCBjb3VudCA9IDM7CmNvbnN0IGZha2VEYXRhVXJsID0gYGh0dHBzOi8vcmFuZG9tdXNlci5tZS9hcGkvP3Jlc3VsdHM9JHtjb3VudH0maW5jPW5hbWUsZ2VuZGVyLGVtYWlsLG5hdCxwaWN0dXJlJm5vaW5mb2A7CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgaW5pdExvYWRpbmcgPSByZWYodHJ1ZSk7CiAgICBjb25zdCBsb2FkaW5nID0gcmVmKGZhbHNlKTsKICAgIGNvbnN0IGRhdGEgPSByZWYoW10pOwogICAgY29uc3QgbGlzdCA9IHJlZihbXSk7CiAgICBvbk1vdW50ZWQoKCkgPT4gewogICAgICBmZXRjaChmYWtlRGF0YVVybCkKICAgICAgICAudGhlbihyZXMgPT4gcmVzLmpzb24oKSkKICAgICAgICAudGhlbihyZXMgPT4gewogICAgICAgICAgaW5pdExvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICAgIGRhdGEudmFsdWUgPSByZXMucmVzdWx0czsKICAgICAgICAgIGxpc3QudmFsdWUgPSByZXMucmVzdWx0czsKICAgICAgICB9KTsKICAgIH0pOwoKICAgIGNvbnN0IG9uTG9hZE1vcmUgPSAoKSA9PiB7CiAgICAgIGxvYWRpbmcudmFsdWUgPSB0cnVlOwogICAgICBsaXN0LnZhbHVlID0gZGF0YS52YWx1ZS5jb25jYXQoCiAgICAgICAgWy4uLm5ldyBBcnJheShjb3VudCldLm1hcCgoKSA9PiAoeyBsb2FkaW5nOiB0cnVlLCBuYW1lOiB7fSwgcGljdHVyZToge30gfSkpLAogICAgICApOwogICAgICBmZXRjaChmYWtlRGF0YVVybCkKICAgICAgICAudGhlbihyZXMgPT4gcmVzLmpzb24oKSkKICAgICAgICAudGhlbihyZXMgPT4gewogICAgICAgICAgY29uc3QgbmV3RGF0YSA9IGRhdGEudmFsdWUuY29uY2F0KHJlcy5yZXN1bHRzKTsKICAgICAgICAgIGxvYWRpbmcudmFsdWUgPSBmYWxzZTsKICAgICAgICAgIGRhdGEudmFsdWUgPSBuZXdEYXRhOwogICAgICAgICAgbGlzdC52YWx1ZSA9IG5ld0RhdGE7CiAgICAgICAgICBuZXh0VGljaygoKSA9PiB7CiAgICAgICAgICAgIC8vIFJlc2V0dGluZyB3aW5kb3cncyBvZmZzZXRUb3Agc28gYXMgdG8gZGlzcGxheSByZWFjdC12aXJ0dWFsaXplZCBkZW1vIHVuZGVyZmxvb3IuCiAgICAgICAgICAgIC8vIEluIHJlYWwgc2NlbmUsIHlvdSBjYW4gdXNpbmcgcHVibGljIG1ldGhvZCBvZiByZWFjdC12aXJ0dWFsaXplZDoKICAgICAgICAgICAgLy8gaHR0cHM6Ly9zdGFja292ZXJmbG93LmNvbS9xdWVzdGlvbnMvNDY3MDA3MjYvaG93LXRvLXVzZS1wdWJsaWMtbWV0aG9kLXVwZGF0ZXBvc2l0aW9uLW9mLXJlYWN0LXZpcnR1YWxpemVkCiAgICAgICAgICAgIHdpbmRvdy5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCgncmVzaXplJykpOwogICAgICAgICAgfSk7CiAgICAgICAgfSk7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIGxvYWRpbmcsCiAgICAgIGluaXRMb2FkaW5nLAogICAgICBkYXRhLAogICAgICBsaXN0LAogICAgICBvbkxvYWRNb3JlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+CjxzdHlsZSBzY29wZWQ+Ci5kZW1vLWxvYWRtb3JlLWxpc3QgewogIG1pbi1oZWlnaHQ6IDM1MHB4Owp9Cjwvc3R5bGU+Cg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIGNsYXNzPSJkZW1vLWxvYWRtb3JlLWxpc3QiCiAgICA6bG9hZGluZz0iaW5pdExvYWRpbmciCiAgICBpdGVtLWxheW91dD0iaG9yaXpvbnRhbCIKICAgIDpkYXRhLXNvdXJjZT0ibGlzdCIKICA+CiAgICA8dGVtcGxhdGUgI2xvYWRNb3JlPgogICAgICA8ZGl2CiAgICAgICAgdi1pZj0iIWluaXRMb2FkaW5nICYmICFsb2FkaW5nIgogICAgICAgIDpzdHlsZT0ieyB0ZXh0QWxpZ246ICdjZW50ZXInLCBtYXJnaW5Ub3A6ICcxMnB4JywgaGVpZ2h0OiAnMzJweCcsIGxpbmVIZWlnaHQ6ICczMnB4JyB9IgogICAgICA+CiAgICAgICAgPGEtYnV0dG9uIEBjbGljaz0ib25Mb2FkTW9yZSI+bG9hZGluZyBtb3JlPC9hLWJ1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8dGVtcGxhdGUgI2FjdGlvbnM+CiAgICAgICAgICA8YSBrZXk9Imxpc3QtbG9hZG1vcmUtZWRpdCI+ZWRpdDwvYT4KICAgICAgICAgIDxhIGtleT0ibGlzdC1sb2FkbW9yZS1tb3JlIj5tb3JlPC9hPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtc2tlbGV0b24gYXZhdGFyIDp0aXRsZT0iZmFsc2UiIDpsb2FkaW5nPSIhIWl0ZW0ubG9hZGluZyIgYWN0aXZlPgogICAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEKICAgICAgICAgICAgZGVzY3JpcHRpb249IkFudCBEZXNpZ24sIGEgZGVzaWduIGxhbmd1YWdlIGZvciBiYWNrZ3JvdW5kIGFwcGxpY2F0aW9ucywgaXMgcmVmaW5lZCBieSBBbnQgVUVEIFRlYW0iCiAgICAgICAgICA+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgICAgPGEgaHJlZj0iaHR0cHM6Ly93d3cuYW50ZHYuY29tLyI+e3sgaXRlbS5uYW1lLmxhc3QgfX08L2E+CiAgICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjYXZhdGFyPgogICAgICAgICAgICAgIDxhLWF2YXRhciA6c3JjPSJpdGVtLnBpY3R1cmUubGFyZ2UiIC8+CiAgICAgICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgICA8L2EtbGlzdC1pdGVtLW1ldGE+CiAgICAgICAgICA8ZGl2PmNvbnRlbnQ8L2Rpdj4KICAgICAgICA8L2Etc2tlbGV0b24+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIG9uTW91bnRlZCwgcmVmLCBuZXh0VGljayB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGNvdW50ID0gMzsKY29uc3QgZmFrZURhdGFVcmwgPSBgaHR0cHM6Ly9yYW5kb211c2VyLm1lL2FwaS8/cmVzdWx0cz0ke2NvdW50fSZpbmM9bmFtZSxnZW5kZXIsZW1haWwsbmF0LHBpY3R1cmUmbm9pbmZvYDsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGluaXRMb2FkaW5nID0gcmVmKHRydWUpOwogICAgY29uc3QgbG9hZGluZyA9IHJlZihmYWxzZSk7CiAgICBjb25zdCBkYXRhID0gcmVmKFtdKTsKICAgIGNvbnN0IGxpc3QgPSByZWYoW10pOwogICAgb25Nb3VudGVkKCgpID0+IHsKICAgICAgZmV0Y2goZmFrZURhdGFVcmwpLnRoZW4ocmVzID0+IHJlcy5qc29uKCkpLnRoZW4ocmVzID0+IHsKICAgICAgICBpbml0TG9hZGluZy52YWx1ZSA9IGZhbHNlOwogICAgICAgIGRhdGEudmFsdWUgPSByZXMucmVzdWx0czsKICAgICAgICBsaXN0LnZhbHVlID0gcmVzLnJlc3VsdHM7CiAgICAgIH0pOwogICAgfSk7CiAgICBjb25zdCBvbkxvYWRNb3JlID0gKCkgPT4gewogICAgICBsb2FkaW5nLnZhbHVlID0gdHJ1ZTsKICAgICAgbGlzdC52YWx1ZSA9IGRhdGEudmFsdWUuY29uY2F0KFsuLi5uZXcgQXJyYXkoY291bnQpXS5tYXAoKCkgPT4gKHsKICAgICAgICBsb2FkaW5nOiB0cnVlLAogICAgICAgIG5hbWU6IHt9LAogICAgICAgIHBpY3R1cmU6IHt9LAogICAgICB9KSkpOwogICAgICBmZXRjaChmYWtlRGF0YVVybCkudGhlbihyZXMgPT4gcmVzLmpzb24oKSkudGhlbihyZXMgPT4gewogICAgICAgIGNvbnN0IG5ld0RhdGEgPSBkYXRhLnZhbHVlLmNvbmNhdChyZXMucmVzdWx0cyk7CiAgICAgICAgbG9hZGluZy52YWx1ZSA9IGZhbHNlOwogICAgICAgIGRhdGEudmFsdWUgPSBuZXdEYXRhOwogICAgICAgIGxpc3QudmFsdWUgPSBuZXdEYXRhOwogICAgICAgIG5leHRUaWNrKCgpID0+IHsKICAgICAgICAgIC8vIFJlc2V0dGluZyB3aW5kb3cncyBvZmZzZXRUb3Agc28gYXMgdG8gZGlzcGxheSByZWFjdC12aXJ0dWFsaXplZCBkZW1vIHVuZGVyZmxvb3IuCiAgICAgICAgICAvLyBJbiByZWFsIHNjZW5lLCB5b3UgY2FuIHVzaW5nIHB1YmxpYyBtZXRob2Qgb2YgcmVhY3QtdmlydHVhbGl6ZWQ6CiAgICAgICAgICAvLyBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy80NjcwMDcyNi9ob3ctdG8tdXNlLXB1YmxpYy1tZXRob2QtdXBkYXRlcG9zaXRpb24tb2YtcmVhY3QtdmlydHVhbGl6ZWQKICAgICAgICAgIHdpbmRvdy5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCgncmVzaXplJykpOwogICAgICAgIH0pOwogICAgICB9KTsKICAgIH07CiAgICByZXR1cm4gewogICAgICBsb2FkaW5nLAogICAgICBpbml0TG9hZGluZywKICAgICAgZGF0YSwKICAgICAgbGlzdCwKICAgICAgb25Mb2FkTW9yZSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pgo8c3R5bGUgc2NvcGVkPgouZGVtby1sb2FkbW9yZS1saXN0IHsKICBtaW4taGVpZ2h0OiAzNTBweDsKfQo8L3N0eWxlPg=="}},{default:s(()=>[e(m,{class:"demo-loadmore-list",loading:p.initLoading,"item-layout":"horizontal","data-source":p.list},{loadMore:s(()=>[!p.initLoading&&!p.loading?(g(),G("div",M,[e(c,{onClick:p.onLoadMore},{default:s(()=>a[0]||(a[0]=[t("loading more")])),_:1,__:[0]},8,["onClick"])])):Y("",!0)]),renderItem:s(({item:v})=>[e(I,null,{actions:s(()=>a[1]||(a[1]=[n("a",{key:"list-loadmore-edit"},"edit",-1),n("a",{key:"list-loadmore-more"},"more",-1)])),default:s(()=>[e(u,{avatar:"",title:!1,loading:!!v.loading,active:""},{default:s(()=>[e(r,{description:"Ant Design, a design language for background applications, is refined by Ant UED Team"},{title:s(()=>[n("a",_,A(v.name.last),1)]),avatar:s(()=>[e(k,{src:v.picture.large},null,8,["src"])]),_:2},1024),a[2]||(a[2]=n("div",null,"content",-1))]),_:2,__:[2]},1032,["loading"])]),_:2},1024)]),_:1},8,["loading","data-source"])]),htmlCode:s(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
    `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("demo-loadmore-list"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("initLoading"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#loadMore"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(`
        `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!initLoading && !loading"),n("span",{class:"token punctuation"},'"')]),t(`
        `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onLoadMore"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("loading more"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list-loadmore-edit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("edit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list-loadmore-more"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("more"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-skeleton")]),t(),n("span",{class:"token attr-name"},"avatar"),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("false"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!!item.loading"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"active"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
            `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Ant Design, a design language for background applications, is refined by Ant UED Team"),n("span",{class:"token punctuation"},'"')]),t(`
          `),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.name.last }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.picture.large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-skeleton")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" onMounted"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" nextTick "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" count "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" fakeDataUrl "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"https://randomuser.me/api/?results="),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("count"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"},"&inc=name,gender,email,nat,picture&noinfo"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" initLoading "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" loading "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"onMounted"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),t(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),t(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
          initLoading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),t(`
          data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},";"),t(`
          list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onLoadMore"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      loading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),t(`
      list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" data"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"concat"),n("span",{class:"token punctuation"},"("),t(`
        `),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),n("span",{class:"token keyword"},"new"),t(),n("span",{class:"token class-name"},"Array"),n("span",{class:"token punctuation"},"("),t("count"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"loading"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"picture"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),t(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),t(`
        `),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token keyword"},"const"),t(" newData "),n("span",{class:"token operator"},"="),t(" data"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"concat"),n("span",{class:"token punctuation"},"("),t("res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
          loading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),t(`
          data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
          list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
          `),n("span",{class:"token function"},"nextTick"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
            `),n("span",{class:"token comment"},"// Resetting window's offsetTop so as to display react-virtualized demo underfloor."),t(`
            `),n("span",{class:"token comment"},"// In real scene, you can using public method of react-virtualized:"),t(`
            `),n("span",{class:"token comment"},"// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized"),t(`
            window`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"dispatchEvent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"new"),t(),n("span",{class:"token class-name"},"Event"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'resize'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
          `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      loading`),n("span",{class:"token punctuation"},","),t(`
      initLoading`),n("span",{class:"token punctuation"},","),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      onLoadMore`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),t(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
`),n("span",{class:"token selector"},".demo-loadmore-list"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token property"},"min-height"),n("span",{class:"token punctuation"},":"),t(" 350px"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[4]||(a[4]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
    `),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("demo-loadmore-list"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("initLoading"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#loadMore"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(`
        `),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!initLoading && !loading"),n("span",{class:"token punctuation"},'"')]),t(`
        `),n("span",{class:"token attr-name"},":style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onLoadMore"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("loading more"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list-loadmore-edit"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("edit"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("list-loadmore-more"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("more"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-skeleton")]),t(),n("span",{class:"token attr-name"},"avatar"),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("false"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":loading"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!!item.loading"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"active"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
            `),n("span",{class:"token attr-name"},"description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Ant Design, a design language for background applications, is refined by Ant UED Team"),n("span",{class:"token punctuation"},'"')]),t(`
          `),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://www.antdv.com/"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.name.last }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.picture.large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t("content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-skeleton")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" onMounted"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" nextTick "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" count "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" fakeDataUrl "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"https://randomuser.me/api/?results="),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("count"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token string"},"&inc=name,gender,email,nat,picture&noinfo"),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" initLoading "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" loading "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"onMounted"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        initLoading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),t(`
        data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},";"),t(`
        list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onLoadMore"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      loading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},";"),t(`
      list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" data"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"concat"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token operator"},"..."),n("span",{class:"token keyword"},"new"),t(),n("span",{class:"token class-name"},"Array"),n("span",{class:"token punctuation"},"("),t("count"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"map"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"loading"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"true"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"picture"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(" res"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"json"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"then"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"res"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token keyword"},"const"),t(" newData "),n("span",{class:"token operator"},"="),t(" data"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"concat"),n("span",{class:"token punctuation"},"("),t("res"),n("span",{class:"token punctuation"},"."),t("results"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
        loading`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},";"),t(`
        data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
        list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token function"},"nextTick"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
          `),n("span",{class:"token comment"},"// Resetting window's offsetTop so as to display react-virtualized demo underfloor."),t(`
          `),n("span",{class:"token comment"},"// In real scene, you can using public method of react-virtualized:"),t(`
          `),n("span",{class:"token comment"},"// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized"),t(`
          window`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"dispatchEvent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"new"),t(),n("span",{class:"token class-name"},"Event"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'resize'"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
        `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      loading`),n("span",{class:"token punctuation"},","),t(`
      initLoading`),n("span",{class:"token punctuation"},","),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      onLoadMore`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("style")]),t(),n("span",{class:"token attr-name"},"scoped"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token style"},[n("span",{class:"token language-css"},[t(`
`),n("span",{class:"token selector"},".demo-loadmore-list"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token property"},"min-height"),n("span",{class:"token punctuation"},":"),t(" 350px"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const O=h(Q,[["render",q],["__scopeId","data-v-d634fdc0"]]),x=[];for(let p=0;p<23;p++)x.push({href:"https://www.antdv.com/",title:`ant design vue part ${p}`,avatar:"https://joeschmoe.io/api/v1/random",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:S,LikeOutlined:F,MessageOutlined:H},setup(){return{listData:x,pagination:{onChange:i=>{console.log(i)},pageSize:3},actions:[{type:"StarOutlined",text:"156"},{type:"LikeOutlined",text:"156"},{type:"MessageOutlined",text:"2"}]}}}),nn=["href"];function tn(p,a,i,d,C,l){const c=o("a-avatar"),k=o("a-list-item-meta"),r=o("a-list-item"),u=o("a-list"),I=o("demo-box");return g(),b(I,{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 <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:"components/list/demo/vertical.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9InZlcnRpY2FsIiBzaXplPSJsYXJnZSIgOnBhZ2luYXRpb249InBhZ2luYXRpb24iIDpkYXRhLXNvdXJjZT0ibGlzdERhdGEiPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+CiAgICAgICAgPGI+YW50IGRlc2lnbiB2dWU8L2I+CiAgICAgICAgZm9vdGVyIHBhcnQKICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSBrZXk9Iml0ZW0udGl0bGUiPgogICAgICAgIDx0ZW1wbGF0ZSAjYWN0aW9ucz4KICAgICAgICAgIDxzcGFuIHYtZm9yPSJ7IHR5cGUsIHRleHQgfSBpbiBhY3Rpb25zIiA6a2V5PSJ0eXBlIj4KICAgICAgICAgICAgPGNvbXBvbmVudCA6aXM9InR5cGUiIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgLz4KICAgICAgICAgICAge3sgdGV4dCB9fQogICAgICAgICAgPC9zcGFuPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgd2lkdGg9IjI3MiIKICAgICAgICAgICAgYWx0PSJsb2dvIgogICAgICAgICAgICBzcmM9Imh0dHBzOi8vZ3cuYWxpcGF5b2JqZWN0cy5jb20vem9zL3Jtc3BvcnRhbC9tcWFRc3djeURMY1h5REtuWmZFUy5wbmciCiAgICAgICAgICAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgOmRlc2NyaXB0aW9uPSJpdGVtLmRlc2NyaXB0aW9uIj4KICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgIDxhIDpocmVmPSJpdGVtLmhyZWYiPnt7IGl0ZW0udGl0bGUgfX08L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgPHRlbXBsYXRlICNhdmF0YXI+PGEtYXZhdGFyIDpzcmM9Iml0ZW0uYXZhdGFyIiAvPjwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIHt7IGl0ZW0uY29udGVudCB9fQogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IFN0YXJPdXRsaW5lZCwgTGlrZU91dGxpbmVkLCBNZXNzYWdlT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwoKY29uc3QgbGlzdERhdGE6IFJlY29yZDxzdHJpbmcsIHN0cmluZz5bXSA9IFtdOwoKZm9yIChsZXQgaSA9IDA7IGkgPCAyMzsgaSsrKSB7CiAgbGlzdERhdGEucHVzaCh7CiAgICBocmVmOiAnaHR0cHM6Ly93d3cuYW50ZHYuY29tLycsCiAgICB0aXRsZTogYGFudCBkZXNpZ24gdnVlIHBhcnQgJHtpfWAsCiAgICBhdmF0YXI6ICdodHRwczovL2pvZXNjaG1vZS5pby9hcGkvdjEvcmFuZG9tJywKICAgIGRlc2NyaXB0aW9uOgogICAgICAnQW50IERlc2lnbiwgYSBkZXNpZ24gbGFuZ3VhZ2UgZm9yIGJhY2tncm91bmQgYXBwbGljYXRpb25zLCBpcyByZWZpbmVkIGJ5IEFudCBVRUQgVGVhbS4nLAogICAgY29udGVudDoKICAgICAgJ1dlIHN1cHBseSBhIHNlcmllcyBvZiBkZXNpZ24gcHJpbmNpcGxlcywgcHJhY3RpY2FsIHBhdHRlcm5zIGFuZCBoaWdoIHF1YWxpdHkgZGVzaWduIHJlc291cmNlcyAoU2tldGNoIGFuZCBBeHVyZSksIHRvIGhlbHAgcGVvcGxlIGNyZWF0ZSB0aGVpciBwcm9kdWN0IHByb3RvdHlwZXMgYmVhdXRpZnVsbHkgYW5kIGVmZmljaWVudGx5LicsCiAgfSk7Cn0KCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgU3Rhck91dGxpbmVkLAogICAgTGlrZU91dGxpbmVkLAogICAgTWVzc2FnZU91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBwYWdpbmF0aW9uID0gewogICAgICBvbkNoYW5nZTogKHBhZ2U6IG51bWJlcikgPT4gewogICAgICAgIGNvbnNvbGUubG9nKHBhZ2UpOwogICAgICB9LAogICAgICBwYWdlU2l6ZTogMywKICAgIH07CiAgICBjb25zdCBhY3Rpb25zOiBSZWNvcmQ8c3RyaW5nLCBzdHJpbmc+W10gPSBbCiAgICAgIHsgdHlwZTogJ1N0YXJPdXRsaW5lZCcsIHRleHQ6ICcxNTYnIH0sCiAgICAgIHsgdHlwZTogJ0xpa2VPdXRsaW5lZCcsIHRleHQ6ICcxNTYnIH0sCiAgICAgIHsgdHlwZTogJ01lc3NhZ2VPdXRsaW5lZCcsIHRleHQ6ICcyJyB9LAogICAgXTsKICAgIHJldHVybiB7CiAgICAgIGxpc3REYXRhLAogICAgICBwYWdpbmF0aW9uLAogICAgICBhY3Rpb25zLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgaXRlbS1sYXlvdXQ9InZlcnRpY2FsIiBzaXplPSJsYXJnZSIgOnBhZ2luYXRpb249InBhZ2luYXRpb24iIDpkYXRhLXNvdXJjZT0ibGlzdERhdGEiPgogICAgPHRlbXBsYXRlICNmb290ZXI+CiAgICAgIDxkaXY+CiAgICAgICAgPGI+YW50IGRlc2lnbiB2dWU8L2I+CiAgICAgICAgZm9vdGVyIHBhcnQKICAgICAgPC9kaXY+CiAgICA8L3RlbXBsYXRlPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbSBrZXk9Iml0ZW0udGl0bGUiPgogICAgICAgIDx0ZW1wbGF0ZSAjYWN0aW9ucz4KICAgICAgICAgIDxzcGFuIHYtZm9yPSJ7IHR5cGUsIHRleHQgfSBpbiBhY3Rpb25zIiA6a2V5PSJ0eXBlIj4KICAgICAgICAgICAgPGNvbXBvbmVudCA6aXM9InR5cGUiIHN0eWxlPSJtYXJnaW4tcmlnaHQ6IDhweCIgLz4KICAgICAgICAgICAge3sgdGV4dCB9fQogICAgICAgICAgPC9zcGFuPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICNleHRyYT4KICAgICAgICAgIDxpbWcKICAgICAgICAgICAgd2lkdGg9IjI3MiIKICAgICAgICAgICAgYWx0PSJsb2dvIgogICAgICAgICAgICBzcmM9Imh0dHBzOi8vZ3cuYWxpcGF5b2JqZWN0cy5jb20vem9zL3Jtc3BvcnRhbC9tcWFRc3djeURMY1h5REtuWmZFUy5wbmciCiAgICAgICAgICAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbGlzdC1pdGVtLW1ldGEgOmRlc2NyaXB0aW9uPSJpdGVtLmRlc2NyaXB0aW9uIj4KICAgICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+CiAgICAgICAgICAgIDxhIDpocmVmPSJpdGVtLmhyZWYiPnt7IGl0ZW0udGl0bGUgfX08L2E+CiAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgPHRlbXBsYXRlICNhdmF0YXI+PGEtYXZhdGFyIDpzcmM9Iml0ZW0uYXZhdGFyIiAvPjwvdGVtcGxhdGU+CiAgICAgICAgPC9hLWxpc3QtaXRlbS1tZXRhPgogICAgICAgIHt7IGl0ZW0uY29udGVudCB9fQogICAgICA8L2EtbGlzdC1pdGVtPgogICAgPC90ZW1wbGF0ZT4KICA8L2EtbGlzdD4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgU3Rhck91dGxpbmVkLCBMaWtlT3V0bGluZWQsIE1lc3NhZ2VPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGxpc3REYXRhID0gW107CmZvciAobGV0IGkgPSAwOyBpIDwgMjM7IGkrKykgewogIGxpc3REYXRhLnB1c2goewogICAgaHJlZjogJ2h0dHBzOi8vd3d3LmFudGR2LmNvbS8nLAogICAgdGl0bGU6IGBhbnQgZGVzaWduIHZ1ZSBwYXJ0ICR7aX1gLAogICAgYXZhdGFyOiAnaHR0cHM6Ly9qb2VzY2htb2UuaW8vYXBpL3YxL3JhbmRvbScsCiAgICBkZXNjcmlwdGlvbjogJ0FudCBEZXNpZ24sIGEgZGVzaWduIGxhbmd1YWdlIGZvciBiYWNrZ3JvdW5kIGFwcGxpY2F0aW9ucywgaXMgcmVmaW5lZCBieSBBbnQgVUVEIFRlYW0uJywKICAgIGNvbnRlbnQ6ICdXZSBzdXBwbHkgYSBzZXJpZXMgb2YgZGVzaWduIHByaW5jaXBsZXMsIHByYWN0aWNhbCBwYXR0ZXJucyBhbmQgaGlnaCBxdWFsaXR5IGRlc2lnbiByZXNvdXJjZXMgKFNrZXRjaCBhbmQgQXh1cmUpLCB0byBoZWxwIHBlb3BsZSBjcmVhdGUgdGhlaXIgcHJvZHVjdCBwcm90b3R5cGVzIGJlYXV0aWZ1bGx5IGFuZCBlZmZpY2llbnRseS4nLAogIH0pOwp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgU3Rhck91dGxpbmVkLAogICAgTGlrZU91dGxpbmVkLAogICAgTWVzc2FnZU91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBwYWdpbmF0aW9uID0gewogICAgICBvbkNoYW5nZTogcGFnZSA9PiB7CiAgICAgICAgY29uc29sZS5sb2cocGFnZSk7CiAgICAgIH0sCiAgICAgIHBhZ2VTaXplOiAzLAogICAgfTsKICAgIGNvbnN0IGFjdGlvbnMgPSBbewogICAgICB0eXBlOiAnU3Rhck91dGxpbmVkJywKICAgICAgdGV4dDogJzE1NicsCiAgICB9LCB7CiAgICAgIHR5cGU6ICdMaWtlT3V0bGluZWQnLAogICAgICB0ZXh0OiAnMTU2JywKICAgIH0sIHsKICAgICAgdHlwZTogJ01lc3NhZ2VPdXRsaW5lZCcsCiAgICAgIHRleHQ6ICcyJywKICAgIH1dOwogICAgcmV0dXJuIHsKICAgICAgbGlzdERhdGEsCiAgICAgIHBhZ2luYXRpb24sCiAgICAgIGFjdGlvbnMsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[e(u,{"item-layout":"vertical",size:"large",pagination:p.pagination,"data-source":p.listData},{footer:s(()=>a[0]||(a[0]=[n("div",null,[n("b",null,"ant design vue"),t(" footer part ")],-1)])),renderItem:s(({item:m})=>[e(r,{key:"item.title"},{actions:s(()=>[(g(!0),G(X,null,V(p.actions,({type:Z,text:v})=>(g(),G("span",{key:Z},[(g(),b(P(Z),{style:{"margin-right":"8px"}})),t(" "+A(v),1)]))),128))]),extra:s(()=>a[1]||(a[1]=[n("img",{width:"272",alt:"logo",src:"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"},null,-1)])),default:s(()=>[e(k,{description:m.description},{title:s(()=>[n("a",{href:m.href},A(m.title),9,nn)]),avatar:s(()=>[e(c,{src:m.avatar},null,8,["src"])]),_:2},1032,["description"]),t(" "+A(m.content),1)]),_:2},1024)]),_:1},8,["pagination","data-source"])]),htmlCode:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":pagination"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("pagination"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("listData"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("b")]),n("span",{class:"token punctuation"},">")]),t("ant design vue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("b")]),n("span",{class:"token punctuation"},">")]),t(`
        footer part
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ type, text } in actions"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("component")]),t(),n("span",{class:"token attr-name"},":is"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("type"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),t(" 8px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            {{ text }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("img")]),t(`
            `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("272"),n("span",{class:"token punctuation"},'"')]),t(`
            `),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("logo"),n("span",{class:"token punctuation"},'"')]),t(`
            `),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"),n("span",{class:"token punctuation"},'"')]),t(`
          `),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(),n("span",{class:"token attr-name"},":description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.description"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},":href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.href"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.title }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.avatar"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
        {{ item.content }}
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" StarOutlined"),n("span",{class:"token punctuation"},","),t(" LikeOutlined"),n("span",{class:"token punctuation"},","),t(" MessageOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`

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

`),n("span",{class:"token keyword"},"for"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"let"),t(" i "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},";"),t(" i "),n("span",{class:"token operator"},"<"),t(),n("span",{class:"token number"},"23"),n("span",{class:"token punctuation"},";"),t(" i"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  listData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"href"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'https://www.antdv.com/'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"ant design vue part "),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("i"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"avatar"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'https://joeschmoe.io/api/v1/random'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
      `),n("span",{class:"token string"},"'Ant Design, a design language for background applications, is refined by Ant UED Team.'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"content"),n("span",{class:"token operator"},":"),t(`
      `),n("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.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    StarOutlined`),n("span",{class:"token punctuation"},","),t(`
    LikeOutlined`),n("span",{class:"token punctuation"},","),t(`
    MessageOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" pagination "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token function-variable function"},"onChange"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"page"),n("span",{class:"token operator"},":"),t(" number")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),t("page"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"pageSize"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"actions"),n("span",{class:"token operator"},":"),t(" Record"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},","),t(" string"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
      `),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'StarOutlined'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'156'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'LikeOutlined'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'156'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'MessageOutlined'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      listData`),n("span",{class:"token punctuation"},","),t(`
      pagination`),n("span",{class:"token punctuation"},","),t(`
      actions`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},"item-layout"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"size"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("large"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":pagination"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("pagination"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("listData"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#footer"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("b")]),n("span",{class:"token punctuation"},">")]),t("ant design vue"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("b")]),n("span",{class:"token punctuation"},">")]),t(`
        footer part
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#actions"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ type, text } in actions"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("type"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("component")]),t(),n("span",{class:"token attr-name"},":is"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("type"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-right"),n("span",{class:"token punctuation"},":"),t(" 8px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            {{ text }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#extra"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("img")]),t(`
            `),n("span",{class:"token attr-name"},"width"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("272"),n("span",{class:"token punctuation"},'"')]),t(`
            `),n("span",{class:"token attr-name"},"alt"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("logo"),n("span",{class:"token punctuation"},'"')]),t(`
            `),n("span",{class:"token attr-name"},"src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"),n("span",{class:"token punctuation"},'"')]),t(`
          `),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(),n("span",{class:"token attr-name"},":description"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.description"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},":href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.href"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("{{ item.title }}"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#avatar"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-avatar")]),t(),n("span",{class:"token attr-name"},":src"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.avatar"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item-meta")]),n("span",{class:"token punctuation"},">")]),t(`
        {{ item.content }}
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" StarOutlined"),n("span",{class:"token punctuation"},","),t(" LikeOutlined"),n("span",{class:"token punctuation"},","),t(" MessageOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" listData "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"for"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token keyword"},"let"),t(" i "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token number"},"0"),n("span",{class:"token punctuation"},";"),t(" i "),n("span",{class:"token operator"},"<"),t(),n("span",{class:"token number"},"23"),n("span",{class:"token punctuation"},";"),t(" i"),n("span",{class:"token operator"},"++"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  listData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"href"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'https://www.antdv.com/'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},"ant design vue part "),n("span",{class:"token interpolation"},[n("span",{class:"token interpolation-punctuation punctuation"},"${"),t("i"),n("span",{class:"token interpolation-punctuation punctuation"},"}")]),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"avatar"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'https://joeschmoe.io/api/v1/random'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Ant Design, a design language for background applications, is refined by Ant UED Team.'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"content"),n("span",{class:"token operator"},":"),t(),n("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.'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    StarOutlined`),n("span",{class:"token punctuation"},","),t(`
    LikeOutlined`),n("span",{class:"token punctuation"},","),t(`
    MessageOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" pagination "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token function-variable function"},"onChange"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token parameter"},"page"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),t("page"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"pageSize"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token number"},"3"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" actions "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'StarOutlined'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'156'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'LikeOutlined'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'156'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'MessageOutlined'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"text"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      listData`),n("span",{class:"token punctuation"},","),t(`
      pagination`),n("span",{class:"token punctuation"},","),t(`
      actions`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const an=h($,[["render",tn]]),sn=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"}],on=y({setup(){return{data:sn}}});function en(p,a,i,d,C,l){const c=o("a-card"),k=o("a-list-item"),r=o("a-list"),u=o("demo-box");return g(),b(u,{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 <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:"components/list/demo/grid.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgY29sdW1uOiA0IH0iIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWNhcmQgOnRpdGxlPSJpdGVtLnRpdGxlIj5DYXJkIGNvbnRlbnQ8L2EtY2FyZD4KICAgICAgPC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwppbnRlcmZhY2UgRGF0YUl0ZW0gewogIHRpdGxlOiBzdHJpbmc7Cn0KY29uc3QgZGF0YTogRGF0YUl0ZW1bXSA9IFsKICB7CiAgICB0aXRsZTogJ1RpdGxlIDEnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSAyJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgMycsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDQnLAogIH0sCl07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICByZXR1cm4gewogICAgICBkYXRhLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QgOmdyaWQ9InsgZ3V0dGVyOiAxNiwgY29sdW1uOiA0IH0iIDpkYXRhLXNvdXJjZT0iZGF0YSI+CiAgICA8dGVtcGxhdGUgI3JlbmRlckl0ZW09InsgaXRlbSB9Ij4KICAgICAgPGEtbGlzdC1pdGVtPgogICAgICAgIDxhLWNhcmQgOnRpdGxlPSJpdGVtLnRpdGxlIj5DYXJkIGNvbnRlbnQ8L2EtY2FyZD4KICAgICAgPC9hLWxpc3QtaXRlbT4KICAgIDwvdGVtcGxhdGU+CiAgPC9hLWxpc3Q+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCB9IGZyb20gJ3Z1ZSc7CmNvbnN0IGRhdGEgPSBbewogIHRpdGxlOiAnVGl0bGUgMScsCn0sIHsKICB0aXRsZTogJ1RpdGxlIDInLAp9LCB7CiAgdGl0bGU6ICdUaXRsZSAzJywKfSwgewogIHRpdGxlOiAnVGl0bGUgNCcsCn1dOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(r,{grid:{gutter:16,column:4},"data-source":p.data},{renderItem:s(({item:I})=>[e(k,null,{default:s(()=>[e(c,{title:I.title},{default:s(()=>a[0]||(a[0]=[t("Card content")])),_:2,__:[0]},1032,["title"])]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},":grid"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ gutter: 16, column: 4 }"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-card")]),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Card content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-card")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),t(" DataItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 2'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 3'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 4'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(),n("span",{class:"token attr-name"},":grid"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ gutter: 16, column: 4 }"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-card")]),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Card content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-card")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 1'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 2'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 3'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 4'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const pn=h(on,[["render",en]]),cn=[{title:"Title 1"},{title:"Title 2"},{title:"Title 3"},{title:"Title 4"},{title:"Title 5"},{title:"Title 6"}],ln=y({setup(){return{data:cn}}});function un(p,a,i,d,C,l){const c=o("a-card"),k=o("a-list-item"),r=o("a-list"),u=o("demo-box");return g(),b(u,{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 <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:"components/list/demo/resposive.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIDpncmlkPSJ7IGd1dHRlcjogMTYsIHhzOiAxLCBzbTogMiwgbWQ6IDQsIGxnOiA0LCB4bDogNiwgeHhsOiAzLCB4eHhsOiAyIH0iCiAgICA6ZGF0YS1zb3VyY2U9ImRhdGEiCiAgPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8YS1jYXJkIDp0aXRsZT0iaXRlbS50aXRsZSI+Q2FyZCBjb250ZW50PC9hLWNhcmQ+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50IH0gZnJvbSAndnVlJzsKaW50ZXJmYWNlIERhdGFJdGVtIHsKICB0aXRsZTogc3RyaW5nOwp9CmNvbnN0IGRhdGE6IERhdGFJdGVtW10gPSBbCiAgewogICAgdGl0bGU6ICdUaXRsZSAxJywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgMicsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDMnLAogIH0sCiAgewogICAgdGl0bGU6ICdUaXRsZSA0JywKICB9LAogIHsKICAgIHRpdGxlOiAnVGl0bGUgNScsCiAgfSwKICB7CiAgICB0aXRsZTogJ1RpdGxlIDYnLAogIH0sCl07CgpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLWxpc3QKICAgIDpncmlkPSJ7IGd1dHRlcjogMTYsIHhzOiAxLCBzbTogMiwgbWQ6IDQsIGxnOiA0LCB4bDogNiwgeHhsOiAzLCB4eHhsOiAyIH0iCiAgICA6ZGF0YS1zb3VyY2U9ImRhdGEiCiAgPgogICAgPHRlbXBsYXRlICNyZW5kZXJJdGVtPSJ7IGl0ZW0gfSI+CiAgICAgIDxhLWxpc3QtaXRlbT4KICAgICAgICA8YS1jYXJkIDp0aXRsZT0iaXRlbS50aXRsZSI+Q2FyZCBjb250ZW50PC9hLWNhcmQ+CiAgICAgIDwvYS1saXN0LWl0ZW0+CiAgICA8L3RlbXBsYXRlPgogIDwvYS1saXN0Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQgfSBmcm9tICd2dWUnOwpjb25zdCBkYXRhID0gW3sKICB0aXRsZTogJ1RpdGxlIDEnLAp9LCB7CiAgdGl0bGU6ICdUaXRsZSAyJywKfSwgewogIHRpdGxlOiAnVGl0bGUgMycsCn0sIHsKICB0aXRsZTogJ1RpdGxlIDQnLAp9LCB7CiAgdGl0bGU6ICdUaXRsZSA1JywKfSwgewogIHRpdGxlOiAnVGl0bGUgNicsCn1dOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgcmV0dXJuIHsKICAgICAgZGF0YSwKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(r,{grid:{gutter:16,xs:1,sm:2,md:4,lg:4,xl:6,xxl:3,xxxl:2},"data-source":p.data},{renderItem:s(({item:I})=>[e(k,null,{default:s(()=>[e(c,{title:I.title},{default:s(()=>a[0]||(a[0]=[t("Card content")])),_:2,__:[0]},1032,["title"])]),_:2},1024)]),_:1},8,["data-source"])]),htmlCode:s(()=>a[1]||(a[1]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
    `),n("span",{class:"token attr-name"},":grid"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-card")]),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Card content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-card")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token punctuation"},"}"),t(`
`),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"data"),n("span",{class:"token operator"},":"),t(" DataItem"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 2'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 3'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 4'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 5'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 6'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
    `),n("span",{class:"token attr-name"},":grid"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3, xxxl: 2 }"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},":data-source"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("data"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#renderItem"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("{ item }"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-card")]),t(),n("span",{class:"token attr-name"},":title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.title"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Card content"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-card")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" data "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 1'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 2'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 3'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 4'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 5'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Title 6'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      data`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const kn=h(ln,[["render",un]]),dn={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:"components/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 |  |  |
| dataSource | \u5217\u8868\u6570\u636E\u6E90 | any\\[] | - | 1.5.0 |  |
| 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 |  |  |
| 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 |  |  |  |
| size | list \u7684\u5C3A\u5BF8 | \`default\` \\| \`middle\` \\| \`small\` | \`default\` |  |  |
| split | \u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF | boolean | true |  |  |

### 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 | \u7248\u672C |
| ------ | -------------------- | ---------------------------------------- | ------ | ---- |
| column | \u5217\u6570                 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | -      |      |
| gutter | \u6805\u683C\u95F4\u9694             | number                                   | 0      |      |
| xxxl   | \`\u22652000px\` \u5C55\u793A\u7684\u5217\u6570 | number                                   | -      | 3.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 | \u7248\u672C |
| --- | --- | --- | --- | --- |
| 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 | vNode[] \\| 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 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="List">List <a class="header-anchor" href="#List">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>bordered</td>
<td>\u662F\u5426\u5C55\u793A\u8FB9\u6846</td>
<td>boolean</td>
<td>false</td>
<td></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>
<td></td>
</tr>
<tr>
<td>footer</td>
<td>\u5217\u8868\u5E95\u90E8</td>
<td>string|slot</td>
<td>-</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>
<td></td>
</tr>
<tr>
<td>header</td>
<td>\u5217\u8868\u5934\u90E8</td>
<td>string|slot</td>
<td>-</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>
<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>
<td></td>
</tr>
<tr>
<td>loadMore</td>
<td>\u52A0\u8F7D\u66F4\u591A</td>
<td>string|slot</td>
<td>-</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>
<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>
<td></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>
<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>
<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>
<td></td>
</tr>
<tr>
<td>split</td>
<td>\u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF</td>
<td>boolean</td>
<td>true</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="pagination">pagination <a class="header-anchor" href="#pagination">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#List-grid-props">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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>column</td>
<td>\u5217\u6570</td>
<td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>gutter</td>
<td>\u6805\u683C\u95F4\u9694</td>
<td>number</td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>xxxl</td>
<td><code>\u22652000px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td>3.0</td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code> \u5C55\u793A\u7684\u5217\u6570</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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>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>vNode[] | slot</td>
<td>-</td>
<td></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>
<td></td>
</tr>
</tbody>
</table>
<h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:1748060300833}},rn={class:"markdown"};function gn(p,a,i,d,C,l){return g(),G("article",rn,a[0]||(a[0]=[B('<p>\u901A\u7528\u5217\u8868\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></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 <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="List">List <a class="header-anchor" href="#List"><span aria-hidden="true" class="anchor">#</span></a></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><th></th></tr></thead><tbody><tr><td>bordered</td><td>\u662F\u5426\u5C55\u793A\u8FB9\u6846</td><td>boolean</td><td>false</td><td></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><td></td></tr><tr><td>footer</td><td>\u5217\u8868\u5E95\u90E8</td><td>string|slot</td><td>-</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><td></td></tr><tr><td>header</td><td>\u5217\u8868\u5934\u90E8</td><td>string|slot</td><td>-</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><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><td></td></tr><tr><td>loadMore</td><td>\u52A0\u8F7D\u66F4\u591A</td><td>string|slot</td><td>-</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><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><td></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><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><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><td></td></tr><tr><td>split</td><td>\u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF</td><td>boolean</td><td>true</td><td></td><td></td></tr></tbody></table><h3 id="pagination">pagination <a class="header-anchor" href="#pagination"><span aria-hidden="true" class="anchor">#</span></a></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 <a class="header-anchor" href="#List-grid-props"><span aria-hidden="true" class="anchor">#</span></a></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>column</td><td>\u5217\u6570</td><td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td><td>-</td><td></td></tr><tr><td>gutter</td><td>\u6805\u683C\u95F4\u9694</td><td>number</td><td>0</td><td></td></tr><tr><td>xxxl</td><td><code>\u22652000px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td>3.0</td></tr><tr><td>xs</td><td><code>&lt;576px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr><tr><td>sm</td><td><code>\u2265576px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr><tr><td>md</td><td><code>\u2265768px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr><tr><td>lg</td><td><code>\u2265992px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr><tr><td>xl</td><td><code>\u22651200px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr><tr><td>xxl</td><td><code>\u22651600px</code> \u5C55\u793A\u7684\u5217\u6570</td><td>number</td><td>-</td><td></td></tr></tbody></table><h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item"><span aria-hidden="true" class="anchor">#</span></a></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>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>vNode[] | slot</td><td>-</td><td></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><td></td></tr></tbody></table><h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta"><span aria-hidden="true" class="anchor">#</span></a></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)]))}const In=h(dn,[["render",gn]]),mn={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:"components/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 |  |  |
| dataSource | dataSource array for list | any\\[] | - | 3.20.1 |  |
| 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 | - |  |  |
| 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 |  |  |
| renderItem | Custom item renderer, #renderItem=&quot;{item, index}&quot; | ({item, index}) =&gt; vNode |  | - |  |
| rowKey | Item&#39;s unique key, could be a string or function that returns a string | string\\|Function(record):string | \`key\` |  |  |
| split | Toggles rendering of the split under the list item | boolean | true |  |  |

### 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 | Version |
| --- | --- | --- | --- | --- |
| 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\` |  |
| xxxl | \`\u22652000px\` column of grid | number | - | 3.0 |
| 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 | Version |
| --- | --- | --- | --- | --- |
| actions | The actions content of list item. If \`itemLayout\` is \`vertical\`, shows the content on bottom, otherwise shows content on the far right. | vNode[] \\|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 <a class="header-anchor" href="#When-To-Use">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="List">List <a class="header-anchor" href="#List">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</th>
<th></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>
<td></td>
</tr>
<tr>
<td>dataSource</td>
<td>dataSource array for list</td>
<td>any[]</td>
<td>-</td>
<td>3.20.1</td>
<td></td>
</tr>
<tr>
<td>footer</td>
<td>List footer renderer</td>
<td>string|slot</td>
<td>-</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>
<td></td>
</tr>
<tr>
<td>header</td>
<td>List header renderer</td>
<td>string|slot</td>
<td>-</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>
<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>
<td></td>
</tr>
<tr>
<td>loadMore</td>
<td>Shows a load more content</td>
<td>string|slot</td>
<td>-</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>
<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>
<td></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>
<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>
<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>
<td></td>
</tr>
</tbody>
</table>
<h3 id="pagination">pagination <a class="header-anchor" href="#pagination">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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 <a class="header-anchor" href="#List-grid-props">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</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>
<td></td>
</tr>
<tr>
<td>gutter</td>
<td>spacing between grid</td>
<td>number</td>
<td>0</td>
<td></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>
<td></td>
</tr>
<tr>
<td>xxxl</td>
<td><code>\u22652000px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td>3.0</td>
</tr>
<tr>
<td>xs</td>
<td><code>&lt;576px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>sm</td>
<td><code>\u2265576px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>md</td>
<td><code>\u2265768px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>lg</td>
<td><code>\u2265992px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xl</td>
<td><code>\u22651200px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>xxl</td>
<td><code>\u22651600px</code> column of grid</td>
<td>number</td>
<td>-</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Property</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
<th>Version</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>vNode[] |slot</td>
<td>-</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>
<td></td>
</tr>
</tbody>
</table>
<h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta">
          <span aria-hidden="true" class="anchor">#</span>
        </a></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:1748060300832}},Cn={class:"markdown"};function hn(p,a,i,d,C,l){return g(),G("article",Cn,a[0]||(a[0]=[B('<p>Simple List.</p><h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use"><span aria-hidden="true" class="anchor">#</span></a></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 <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="List">List <a class="header-anchor" href="#List"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</th><th></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><td></td></tr><tr><td>dataSource</td><td>dataSource array for list</td><td>any[]</td><td>-</td><td>3.20.1</td><td></td></tr><tr><td>footer</td><td>List footer renderer</td><td>string|slot</td><td>-</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><td></td></tr><tr><td>header</td><td>List header renderer</td><td>string|slot</td><td>-</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><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><td></td></tr><tr><td>loadMore</td><td>Shows a load more content</td><td>string|slot</td><td>-</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><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><td></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><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><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><td></td></tr></tbody></table><h3 id="pagination">pagination <a class="header-anchor" href="#pagination"><span aria-hidden="true" class="anchor">#</span></a></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 <a class="header-anchor" href="#List-grid-props"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</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><td></td></tr><tr><td>gutter</td><td>spacing between grid</td><td>number</td><td>0</td><td></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><td></td></tr><tr><td>xxxl</td><td><code>\u22652000px</code> column of grid</td><td>number</td><td>-</td><td>3.0</td></tr><tr><td>xs</td><td><code>&lt;576px</code> column of grid</td><td>number</td><td>-</td><td></td></tr><tr><td>sm</td><td><code>\u2265576px</code> column of grid</td><td>number</td><td>-</td><td></td></tr><tr><td>md</td><td><code>\u2265768px</code> column of grid</td><td>number</td><td>-</td><td></td></tr><tr><td>lg</td><td><code>\u2265992px</code> column of grid</td><td>number</td><td>-</td><td></td></tr><tr><td>xl</td><td><code>\u22651200px</code> column of grid</td><td>number</td><td>-</td><td></td></tr><tr><td>xxl</td><td><code>\u22651600px</code> column of grid</td><td>number</td><td>-</td><td></td></tr></tbody></table><h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th><th>Version</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>vNode[] |slot</td><td>-</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><td></td></tr></tbody></table><h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta"><span aria-hidden="true" class="anchor">#</span></a></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)]))}const An=h(mn,[["render",hn]]),bn=y({CN:In,US:An,components:{Basic:T,Simple:E,Loadmore:O,Vertical:an,Grid:pn,Resposive:kn},setup(){return{}}});function yn(p,a,i,d,C,l){const c=o("basic"),k=o("simple"),r=o("loadmore"),u=o("vertical"),I=o("grid"),m=o("resposive");return g(),G(X,null,[e(c),e(k),e(r),e(u),e(I),e(m)],64)}const wn=h(bn,[["render",yn]]);export{wn as default};