index.eb64c115.js 225 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461
  1. 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">
  2. <span aria-hidden="true" class="anchor">#</span>
  3. </a></h2>
  4. <p>\u57FA\u7840\u5217\u8868\u3002</p>
  5. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  6. <span aria-hidden="true" class="anchor">#</span>
  7. </a></h2>
  8. <p>Basic list.</p>
  9. `,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(`
  10. `),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(`
  11. `),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(`
  12. `),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(`
  13. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
  14. `),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(`
  15. `),n("span",{class:"token punctuation"},">")]),t(`
  16. `),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(`
  17. `),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(`
  18. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  19. `),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(`
  20. `),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(`
  21. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  22. `),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(`
  23. `),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(`
  24. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  25. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  26. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  27. `),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(`
  28. `),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(`
  29. `),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  30. `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
  31. `),n("span",{class:"token punctuation"},"}"),t(`
  32. `),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(`
  33. `),n("span",{class:"token punctuation"},"{"),t(`
  34. `),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(`
  35. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  36. `),n("span",{class:"token punctuation"},"{"),t(`
  37. `),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(`
  38. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  39. `),n("span",{class:"token punctuation"},"{"),t(`
  40. `),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(`
  41. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  42. `),n("span",{class:"token punctuation"},"{"),t(`
  43. `),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(`
  44. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  45. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  46. `),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(`
  47. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  48. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  49. data`),n("span",{class:"token punctuation"},","),t(`
  50. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  51. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  52. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  53. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  54. `)])],-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(`
  55. `),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(`
  56. `),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(`
  57. `),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(`
  58. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
  59. `),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(`
  60. `),n("span",{class:"token punctuation"},">")]),t(`
  61. `),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(`
  62. `),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(`
  63. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  64. `),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(`
  65. `),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(`
  66. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  67. `),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(`
  68. `),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(`
  69. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  70. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  71. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  72. `),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(`
  73. `),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(`
  74. `),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(`
  75. `),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(`
  76. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  77. `),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(`
  78. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  79. `),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(`
  80. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  81. `),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(`
  82. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  83. `),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(`
  84. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  85. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  86. data`),n("span",{class:"token punctuation"},","),t(`
  87. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  88. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  89. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  90. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  91. `)])],-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">
  92. <span aria-hidden="true" class="anchor">#</span>
  93. </a></h2>
  94. <p>\u5217\u8868\u62E5\u6709\u5927\u3001\u4E2D\u3001\u5C0F\u4E09\u79CD\u5C3A\u5BF8\u3002
  95. \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
  96. \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>
  97. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  98. <span aria-hidden="true" class="anchor">#</span>
  99. </a></h2>
  100. <p>Ant Design supports a default list size as well as a large and small size.
  101. 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.
  102. Customizing the header and footer of list by setting <code>header</code> and <code>footer</code> property.</p>
  103. `,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(`
  104. `),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(`
  105. `),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(`
  106. `),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(`
  107. `),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(`
  108. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  109. `),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(`
  110. `),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(`
  111. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  112. `),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(`
  113. `),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(`
  114. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  115. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  116. `),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(`
  117. `),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(`
  118. `),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(`
  119. `),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(`
  120. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  121. `),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(`
  122. `),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(`
  123. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  124. `),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(`
  125. `),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(`
  126. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  127. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  128. `),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(`
  129. `),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(`
  130. `),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(`
  131. `),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(`
  132. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  133. `),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(`
  134. `),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(`
  135. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  136. `),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(`
  137. `),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(`
  138. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  139. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  140. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  141. `),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(`
  142. `),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(`
  143. `),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(`
  144. `),n("span",{class:"token string"},"'Racing car sprays burning fuel into crowd.'"),n("span",{class:"token punctuation"},","),t(`
  145. `),n("span",{class:"token string"},"'Japanese princess to wed commoner.'"),n("span",{class:"token punctuation"},","),t(`
  146. `),n("span",{class:"token string"},"'Australian walks 100km after outback crash.'"),n("span",{class:"token punctuation"},","),t(`
  147. `),n("span",{class:"token string"},"'Man charged over missing wedding girl.'"),n("span",{class:"token punctuation"},","),t(`
  148. `),n("span",{class:"token string"},"'Los Angeles battles huge wildfires.'"),n("span",{class:"token punctuation"},","),t(`
  149. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  150. `),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(`
  151. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  152. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  153. data`),n("span",{class:"token punctuation"},","),t(`
  154. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  155. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  156. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  157. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  158. `)])],-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(`
  159. `),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(`
  160. `),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(`
  161. `),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(`
  162. `),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(`
  163. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  164. `),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(`
  165. `),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(`
  166. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  167. `),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(`
  168. `),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(`
  169. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  170. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  171. `),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(`
  172. `),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(`
  173. `),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(`
  174. `),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(`
  175. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  176. `),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(`
  177. `),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(`
  178. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  179. `),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(`
  180. `),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(`
  181. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  182. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  183. `),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(`
  184. `),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(`
  185. `),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(`
  186. `),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(`
  187. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  188. `),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(`
  189. `),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(`
  190. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  191. `),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(`
  192. `),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(`
  193. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  194. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  195. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  196. `),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(`
  197. `),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(`
  198. `),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(`
  199. `),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(`
  200. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  201. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  202. data`),n("span",{class:"token punctuation"},","),t(`
  203. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  204. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  205. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  206. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  207. `)])],-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">
  208. <span aria-hidden="true" class="anchor">#</span>
  209. </a></h2>
  210. <p>\u53EF\u901A\u8FC7 <code>loadMore</code> \u5C5E\u6027\u5B9E\u73B0\u52A0\u8F7D\u66F4\u591A\u529F\u80FD\u3002</p>
  211. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  212. <span aria-hidden="true" class="anchor">#</span>
  213. </a></h2>
  214. <p>Load more list with <code>loadMore</code> property.</p>
  215. `,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(`
  216. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
  217. `),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(`
  218. `),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(`
  219. `),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(`
  220. `),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(`
  221. `),n("span",{class:"token punctuation"},">")]),t(`
  222. `),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(`
  223. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(`
  224. `),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(`
  225. `),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(`
  226. `),n("span",{class:"token punctuation"},">")]),t(`
  227. `),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(`
  228. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  229. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  230. `),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(`
  231. `),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(`
  232. `),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(`
  233. `),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(`
  234. `),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(`
  235. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  236. `),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(`
  237. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
  238. `),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(`
  239. `),n("span",{class:"token punctuation"},">")]),t(`
  240. `),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(`
  241. `),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(`
  242. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  243. `),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(`
  244. `),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(`
  245. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  246. `),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(`
  247. `),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(`
  248. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-skeleton")]),n("span",{class:"token punctuation"},">")]),t(`
  249. `),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(`
  250. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  251. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  252. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  253. `),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(`
  254. `),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(`
  255. `),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(`
  256. `),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(`
  257. `),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(`
  258. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  259. `),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(`
  260. `),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(`
  261. `),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(`
  262. `),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(`
  263. `),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(`
  264. `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),t(`
  265. `),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(`
  266. `),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(`
  267. 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(`
  268. 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(`
  269. 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(`
  270. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  271. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  272. `),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(`
  273. 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(`
  274. 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(`
  275. `),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(`
  276. `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  277. `),n("span",{class:"token function"},"fetch"),n("span",{class:"token punctuation"},"("),t("fakeDataUrl"),n("span",{class:"token punctuation"},")"),t(`
  278. `),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(`
  279. `),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(`
  280. `),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(`
  281. 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(`
  282. data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
  283. list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
  284. `),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(`
  285. `),n("span",{class:"token comment"},"// Resetting window's offsetTop so as to display react-virtualized demo underfloor."),t(`
  286. `),n("span",{class:"token comment"},"// In real scene, you can using public method of react-virtualized:"),t(`
  287. `),n("span",{class:"token comment"},"// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized"),t(`
  288. 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(`
  289. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  290. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  291. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  292. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  293. loading`),n("span",{class:"token punctuation"},","),t(`
  294. initLoading`),n("span",{class:"token punctuation"},","),t(`
  295. data`),n("span",{class:"token punctuation"},","),t(`
  296. list`),n("span",{class:"token punctuation"},","),t(`
  297. onLoadMore`),n("span",{class:"token punctuation"},","),t(`
  298. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  299. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  300. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  301. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  302. `),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(`
  303. `),n("span",{class:"token selector"},".demo-loadmore-list"),t(),n("span",{class:"token punctuation"},"{"),t(`
  304. `),n("span",{class:"token property"},"min-height"),n("span",{class:"token punctuation"},":"),t(" 350px"),n("span",{class:"token punctuation"},";"),t(`
  305. `),n("span",{class:"token punctuation"},"}"),t(`
  306. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
  307. `)])],-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(`
  308. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
  309. `),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(`
  310. `),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(`
  311. `),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(`
  312. `),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(`
  313. `),n("span",{class:"token punctuation"},">")]),t(`
  314. `),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(`
  315. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(`
  316. `),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(`
  317. `),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(`
  318. `),n("span",{class:"token punctuation"},">")]),t(`
  319. `),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(`
  320. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  321. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  322. `),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(`
  323. `),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(`
  324. `),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(`
  325. `),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(`
  326. `),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(`
  327. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  328. `),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(`
  329. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list-item-meta")]),t(`
  330. `),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(`
  331. `),n("span",{class:"token punctuation"},">")]),t(`
  332. `),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(`
  333. `),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(`
  334. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  335. `),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(`
  336. `),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(`
  337. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  338. `),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(`
  339. `),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(`
  340. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-skeleton")]),n("span",{class:"token punctuation"},">")]),t(`
  341. `),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(`
  342. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  343. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  344. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  345. `),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(`
  346. `),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(`
  347. `),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(`
  348. `),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(`
  349. `),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(`
  350. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  351. `),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(`
  352. `),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(`
  353. `),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(`
  354. `),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(`
  355. `),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(`
  356. `),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(`
  357. 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(`
  358. 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(`
  359. 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(`
  360. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  361. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  362. `),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(`
  363. 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(`
  364. 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(`
  365. `),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(`
  366. `),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(`
  367. `),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(`
  368. `),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(`
  369. `),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(`
  370. `),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(`
  371. 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(`
  372. data`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
  373. list`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(" newData"),n("span",{class:"token punctuation"},";"),t(`
  374. `),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(`
  375. `),n("span",{class:"token comment"},"// Resetting window's offsetTop so as to display react-virtualized demo underfloor."),t(`
  376. `),n("span",{class:"token comment"},"// In real scene, you can using public method of react-virtualized:"),t(`
  377. `),n("span",{class:"token comment"},"// https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized"),t(`
  378. 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(`
  379. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  380. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  381. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  382. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  383. loading`),n("span",{class:"token punctuation"},","),t(`
  384. initLoading`),n("span",{class:"token punctuation"},","),t(`
  385. data`),n("span",{class:"token punctuation"},","),t(`
  386. list`),n("span",{class:"token punctuation"},","),t(`
  387. onLoadMore`),n("span",{class:"token punctuation"},","),t(`
  388. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  389. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  390. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  391. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  392. `),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(`
  393. `),n("span",{class:"token selector"},".demo-loadmore-list"),t(),n("span",{class:"token punctuation"},"{"),t(`
  394. `),n("span",{class:"token property"},"min-height"),n("span",{class:"token punctuation"},":"),t(" 350px"),n("span",{class:"token punctuation"},";"),t(`
  395. `),n("span",{class:"token punctuation"},"}"),t(`
  396. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("style")]),n("span",{class:"token punctuation"},">")]),t(`
  397. `)])],-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">
  398. <span aria-hidden="true" class="anchor">#</span>
  399. </a></h2>
  400. <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>
  401. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  402. <span aria-hidden="true" class="anchor">#</span>
  403. </a></h2>
  404. <p>Setting <code>itemLayout</code> property with <code>vertical</code> to create a vertical list.</p>
  405. `,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(`
  406. `),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(`
  407. `),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(`
  408. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  409. `),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(`
  410. footer part
  411. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  412. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  413. `),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(`
  414. `),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(`
  415. `),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(`
  416. `),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(`
  417. `),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(`
  418. {{ text }}
  419. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
  420. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  421. `),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(`
  422. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("img")]),t(`
  423. `),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(`
  424. `),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(`
  425. `),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(`
  426. `),n("span",{class:"token punctuation"},"/>")]),t(`
  427. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  428. `),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(`
  429. `),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(`
  430. `),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(`
  431. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  432. `),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(`
  433. `),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(`
  434. {{ item.content }}
  435. `),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(`
  436. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  437. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  438. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  439. `),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(`
  440. `),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(`
  441. `),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(`
  442. `),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(`
  443. `),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(`
  444. listData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  445. `),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(`
  446. `),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(`
  447. `),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(`
  448. `),n("span",{class:"token literal-property property"},"description"),n("span",{class:"token operator"},":"),t(`
  449. `),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(`
  450. `),n("span",{class:"token literal-property property"},"content"),n("span",{class:"token operator"},":"),t(`
  451. `),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(`
  452. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  453. `),n("span",{class:"token punctuation"},"}"),t(`
  454. `),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(`
  455. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
  456. StarOutlined`),n("span",{class:"token punctuation"},","),t(`
  457. LikeOutlined`),n("span",{class:"token punctuation"},","),t(`
  458. MessageOutlined`),n("span",{class:"token punctuation"},","),t(`
  459. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  460. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  461. `),n("span",{class:"token keyword"},"const"),t(" pagination "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  462. `),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(`
  463. 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(`
  464. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  465. `),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(`
  466. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  467. `),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(`
  468. `),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(`
  469. `),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(`
  470. `),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(`
  471. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  472. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  473. listData`),n("span",{class:"token punctuation"},","),t(`
  474. pagination`),n("span",{class:"token punctuation"},","),t(`
  475. actions`),n("span",{class:"token punctuation"},","),t(`
  476. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  477. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  478. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  479. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  480. `)])],-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(`
  481. `),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(`
  482. `),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(`
  483. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  484. `),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(`
  485. footer part
  486. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
  487. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  488. `),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(`
  489. `),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(`
  490. `),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(`
  491. `),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(`
  492. `),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(`
  493. {{ text }}
  494. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
  495. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  496. `),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(`
  497. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("img")]),t(`
  498. `),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(`
  499. `),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(`
  500. `),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(`
  501. `),n("span",{class:"token punctuation"},"/>")]),t(`
  502. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  503. `),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(`
  504. `),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(`
  505. `),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(`
  506. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  507. `),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(`
  508. `),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(`
  509. {{ item.content }}
  510. `),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(`
  511. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  512. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  513. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  514. `),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(`
  515. `),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(`
  516. `),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(`
  517. `),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(`
  518. `),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(`
  519. listData`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"push"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  520. `),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(`
  521. `),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(`
  522. `),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(`
  523. `),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(`
  524. `),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(`
  525. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  526. `),n("span",{class:"token punctuation"},"}"),t(`
  527. `),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(`
  528. `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
  529. StarOutlined`),n("span",{class:"token punctuation"},","),t(`
  530. LikeOutlined`),n("span",{class:"token punctuation"},","),t(`
  531. MessageOutlined`),n("span",{class:"token punctuation"},","),t(`
  532. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  533. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  534. `),n("span",{class:"token keyword"},"const"),t(" pagination "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  535. `),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(`
  536. 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(`
  537. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  538. `),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(`
  539. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  540. `),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(`
  541. `),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(`
  542. `),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(`
  543. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  544. `),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(`
  545. `),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(`
  546. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  547. `),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(`
  548. `),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(`
  549. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  550. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  551. listData`),n("span",{class:"token punctuation"},","),t(`
  552. pagination`),n("span",{class:"token punctuation"},","),t(`
  553. actions`),n("span",{class:"token punctuation"},","),t(`
  554. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  555. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  556. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  557. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  558. `)])],-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">
  559. <span aria-hidden="true" class="anchor">#</span>
  560. </a></h2>
  561. <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>
  562. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  563. <span aria-hidden="true" class="anchor">#</span>
  564. </a></h2>
  565. <p>Creating a grid list by setting the <code>grid</code> property of List</p>
  566. `,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(`
  567. `),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(`
  568. `),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(`
  569. `),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(`
  570. `),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(`
  571. `),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(`
  572. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  573. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  574. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  575. `),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(`
  576. `),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(`
  577. `),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  578. `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
  579. `),n("span",{class:"token punctuation"},"}"),t(`
  580. `),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(`
  581. `),n("span",{class:"token punctuation"},"{"),t(`
  582. `),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(`
  583. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  584. `),n("span",{class:"token punctuation"},"{"),t(`
  585. `),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(`
  586. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  587. `),n("span",{class:"token punctuation"},"{"),t(`
  588. `),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(`
  589. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  590. `),n("span",{class:"token punctuation"},"{"),t(`
  591. `),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(`
  592. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  593. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  594. `),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(`
  595. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  596. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  597. data`),n("span",{class:"token punctuation"},","),t(`
  598. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  599. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  600. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  601. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  602. `)])],-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(`
  603. `),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(`
  604. `),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(`
  605. `),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(`
  606. `),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(`
  607. `),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(`
  608. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  609. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  610. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  611. `),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(`
  612. `),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(`
  613. `),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(`
  614. `),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(`
  615. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  616. `),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(`
  617. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  618. `),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(`
  619. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  620. `),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(`
  621. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  622. `),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(`
  623. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  624. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  625. data`),n("span",{class:"token punctuation"},","),t(`
  626. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  627. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  628. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  629. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  630. `)])],-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">
  631. <span aria-hidden="true" class="anchor">#</span>
  632. </a></h2>
  633. <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>
  634. <h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
  635. <span aria-hidden="true" class="anchor">#</span>
  636. </a></h2>
  637. <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>
  638. `,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(`
  639. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
  640. `),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(`
  641. `),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(`
  642. `),n("span",{class:"token punctuation"},">")]),t(`
  643. `),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(`
  644. `),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(`
  645. `),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(`
  646. `),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(`
  647. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  648. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  649. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  650. `),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(`
  651. `),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(`
  652. `),n("span",{class:"token keyword"},"interface"),t(),n("span",{class:"token class-name"},"DataItem"),t(),n("span",{class:"token punctuation"},"{"),t(`
  653. `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(`
  654. `),n("span",{class:"token punctuation"},"}"),t(`
  655. `),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(`
  656. `),n("span",{class:"token punctuation"},"{"),t(`
  657. `),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(`
  658. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  659. `),n("span",{class:"token punctuation"},"{"),t(`
  660. `),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(`
  661. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  662. `),n("span",{class:"token punctuation"},"{"),t(`
  663. `),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(`
  664. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  665. `),n("span",{class:"token punctuation"},"{"),t(`
  666. `),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(`
  667. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  668. `),n("span",{class:"token punctuation"},"{"),t(`
  669. `),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(`
  670. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  671. `),n("span",{class:"token punctuation"},"{"),t(`
  672. `),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(`
  673. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  674. `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  675. `),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(`
  676. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  677. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  678. data`),n("span",{class:"token punctuation"},","),t(`
  679. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  680. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  681. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  682. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  683. `)])],-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(`
  684. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-list")]),t(`
  685. `),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(`
  686. `),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(`
  687. `),n("span",{class:"token punctuation"},">")]),t(`
  688. `),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(`
  689. `),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(`
  690. `),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(`
  691. `),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(`
  692. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  693. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-list")]),n("span",{class:"token punctuation"},">")]),t(`
  694. `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  695. `),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(`
  696. `),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(`
  697. `),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(`
  698. `),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(`
  699. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  700. `),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(`
  701. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  702. `),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(`
  703. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  704. `),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(`
  705. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  706. `),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(`
  707. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  708. `),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(`
  709. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
  710. `),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(`
  711. `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
  712. `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
  713. data`),n("span",{class:"token punctuation"},","),t(`
  714. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  715. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  716. `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
  717. `)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
  718. `)])],-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:`
  719. \u901A\u7528\u5217\u8868\u3002
  720. ## \u4F55\u65F6\u4F7F\u7528
  721. \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
  722. ## API
  723. ### List
  724. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | |
  725. | --- | --- | --- | --- | --- | --- |
  726. | bordered | \u662F\u5426\u5C55\u793A\u8FB9\u6846 | boolean | false | | |
  727. | dataSource | \u5217\u8868\u6570\u636E\u6E90 | any\\[] | - | 1.5.0 | |
  728. | footer | \u5217\u8868\u5E95\u90E8 | string\\|slot | - | | |
  729. | grid | \u5217\u8868\u6805\u683C\u914D\u7F6E | object | - | | |
  730. | header | \u5217\u8868\u5934\u90E8 | string\\|slot | - | | |
  731. | itemLayout | \u8BBE\u7F6E \`List.Item\` \u5E03\u5C40, \u8BBE\u7F6E\u6210 \`vertical\` \u5219\u7AD6\u76F4\u6837\u5F0F\u663E\u793A, \u9ED8\u8BA4\u6A2A\u6392 | string | - | | |
  732. | 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 | | |
  733. | loadMore | \u52A0\u8F7D\u66F4\u591A | string\\|slot | - | | |
  734. | 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; | | |
  735. | pagination | \u5BF9\u5E94\u7684 \`pagination\` [\u914D\u7F6E](https://www.antdv.com/components/pagination-cn/#API), \u8BBE\u7F6E \`false\` \u4E0D\u663E\u793A | boolean\\|object | false | | |
  736. | renderItem | \u81EA\u5B9A\u4E49\`Item\`\u51FD\u6570\uFF0C\u4E5F\u53EF\u4F7F\u7528 #renderItem=&quot;{item, index}&quot; | ({item, index}) =&gt; vNode | | - | |
  737. | rowKey | \u5404\u9879 key \u7684\u53D6\u503C\uFF0C\u53EF\u4EE5\u662F\u5B57\u7B26\u4E32\u6216\u4E00\u4E2A\u51FD\u6570 | item =&gt; string\\|number | | | |
  738. | size | list \u7684\u5C3A\u5BF8 | \`default\` \\| \`middle\` \\| \`small\` | \`default\` | | |
  739. | split | \u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF | boolean | true | | |
  740. ### pagination
  741. \u5206\u9875\u7684\u914D\u7F6E\u9879\u3002
  742. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
  743. | -------- | ------------------ | --------------------------- | -------- |
  744. | position | \u6307\u5B9A\u5206\u9875\u663E\u793A\u7684\u4F4D\u7F6E | &#39;top&#39; \\| &#39;bottom&#39; \\| &#39;both&#39; | &#39;bottom&#39; |
  745. \u66F4\u591A\u914D\u7F6E\u9879\uFF0C\u8BF7\u67E5\u770B [\`Pagination\`](https://www.antdv.com/components/pagination-cn/#API)\u3002
  746. ### List grid props
  747. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
  748. | ------ | -------------------- | ---------------------------------------- | ------ | ---- |
  749. | column | \u5217\u6570 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
  750. | gutter | \u6805\u683C\u95F4\u9694 | number | 0 | |
  751. | xxxl | \`\u22652000px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | 3.0 |
  752. | xs | \`&lt;576px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  753. | sm | \`\u2265576px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  754. | md | \`\u2265768px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  755. | lg | \`\u2265992px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  756. | xl | \`\u22651200px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  757. | xxl | \`\u22651600px\` \u5C55\u793A\u7684\u5217\u6570 | number | - | |
  758. ### List.Item
  759. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C |
  760. | --- | --- | --- | --- | --- |
  761. | 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 | - |
  762. | 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 | - | |
  763. ### List.Item.Meta
  764. | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
  765. | ----------- | ------------------ | ------------ | ------ |
  766. | avatar | \u5217\u8868\u5143\u7D20\u7684\u56FE\u6807 | slot | - |
  767. | description | \u5217\u8868\u5143\u7D20\u7684\u63CF\u8FF0\u5185\u5BB9 | string\\|slot | - |
  768. | title | \u5217\u8868\u5143\u7D20\u7684\u6807\u9898 | string\\|slot | - |
  769. `,html:`<p>\u901A\u7528\u5217\u8868\u3002</p>
  770. <h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
  771. <span aria-hidden="true" class="anchor">#</span>
  772. </a></h2>
  773. <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>
  774. <h2 id="API">API <a class="header-anchor" href="#API">
  775. <span aria-hidden="true" class="anchor">#</span>
  776. </a></h2>
  777. <h3 id="List">List <a class="header-anchor" href="#List">
  778. <span aria-hidden="true" class="anchor">#</span>
  779. </a></h3>
  780. <table>
  781. <thead>
  782. <tr>
  783. <th>\u53C2\u6570</th>
  784. <th>\u8BF4\u660E</th>
  785. <th>\u7C7B\u578B</th>
  786. <th>\u9ED8\u8BA4\u503C</th>
  787. <th>\u7248\u672C</th>
  788. <th></th>
  789. </tr>
  790. </thead>
  791. <tbody>
  792. <tr>
  793. <td>bordered</td>
  794. <td>\u662F\u5426\u5C55\u793A\u8FB9\u6846</td>
  795. <td>boolean</td>
  796. <td>false</td>
  797. <td></td>
  798. <td></td>
  799. </tr>
  800. <tr>
  801. <td>dataSource</td>
  802. <td>\u5217\u8868\u6570\u636E\u6E90</td>
  803. <td>any[]</td>
  804. <td>-</td>
  805. <td>1.5.0</td>
  806. <td></td>
  807. </tr>
  808. <tr>
  809. <td>footer</td>
  810. <td>\u5217\u8868\u5E95\u90E8</td>
  811. <td>string|slot</td>
  812. <td>-</td>
  813. <td></td>
  814. <td></td>
  815. </tr>
  816. <tr>
  817. <td>grid</td>
  818. <td>\u5217\u8868\u6805\u683C\u914D\u7F6E</td>
  819. <td>object</td>
  820. <td>-</td>
  821. <td></td>
  822. <td></td>
  823. </tr>
  824. <tr>
  825. <td>header</td>
  826. <td>\u5217\u8868\u5934\u90E8</td>
  827. <td>string|slot</td>
  828. <td>-</td>
  829. <td></td>
  830. <td></td>
  831. </tr>
  832. <tr>
  833. <td>itemLayout</td>
  834. <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>
  835. <td>string</td>
  836. <td>-</td>
  837. <td></td>
  838. <td></td>
  839. </tr>
  840. <tr>
  841. <td>loading</td>
  842. <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>
  843. <td>boolean|<a href="https://www.antdv.com/components/spin-cn/#API" target="_blank" rel="noopener noreferrer">object</a></td>
  844. <td>false</td>
  845. <td></td>
  846. <td></td>
  847. </tr>
  848. <tr>
  849. <td>loadMore</td>
  850. <td>\u52A0\u8F7D\u66F4\u591A</td>
  851. <td>string|slot</td>
  852. <td>-</td>
  853. <td></td>
  854. <td></td>
  855. </tr>
  856. <tr>
  857. <td>locale</td>
  858. <td>\u9ED8\u8BA4\u6587\u6848\u8BBE\u7F6E\uFF0C\u76EE\u524D\u5305\u62EC\u7A7A\u6570\u636E\u6587\u6848</td>
  859. <td>object</td>
  860. <td>emptyText: '\u6682\u65E0\u6570\u636E'</td>
  861. <td></td>
  862. <td></td>
  863. </tr>
  864. <tr>
  865. <td>pagination</td>
  866. <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>
  867. <td>boolean|object</td>
  868. <td>false</td>
  869. <td></td>
  870. <td></td>
  871. </tr>
  872. <tr>
  873. <td>renderItem</td>
  874. <td>\u81EA\u5B9A\u4E49<code>Item</code>\u51FD\u6570\uFF0C\u4E5F\u53EF\u4F7F\u7528 #renderItem=&quot;{item, index}&quot;</td>
  875. <td>({item, index}) =&gt; vNode</td>
  876. <td></td>
  877. <td>-</td>
  878. <td></td>
  879. </tr>
  880. <tr>
  881. <td>rowKey</td>
  882. <td>\u5404\u9879 key \u7684\u53D6\u503C\uFF0C\u53EF\u4EE5\u662F\u5B57\u7B26\u4E32\u6216\u4E00\u4E2A\u51FD\u6570</td>
  883. <td>item =&gt; string|number</td>
  884. <td></td>
  885. <td></td>
  886. <td></td>
  887. </tr>
  888. <tr>
  889. <td>size</td>
  890. <td>list \u7684\u5C3A\u5BF8</td>
  891. <td><code>default</code> | <code>middle</code> | <code>small</code></td>
  892. <td><code>default</code></td>
  893. <td></td>
  894. <td></td>
  895. </tr>
  896. <tr>
  897. <td>split</td>
  898. <td>\u662F\u5426\u5C55\u793A\u5206\u5272\u7EBF</td>
  899. <td>boolean</td>
  900. <td>true</td>
  901. <td></td>
  902. <td></td>
  903. </tr>
  904. </tbody>
  905. </table>
  906. <h3 id="pagination">pagination <a class="header-anchor" href="#pagination">
  907. <span aria-hidden="true" class="anchor">#</span>
  908. </a></h3>
  909. <p>\u5206\u9875\u7684\u914D\u7F6E\u9879\u3002</p>
  910. <table>
  911. <thead>
  912. <tr>
  913. <th>\u53C2\u6570</th>
  914. <th>\u8BF4\u660E</th>
  915. <th>\u7C7B\u578B</th>
  916. <th>\u9ED8\u8BA4\u503C</th>
  917. </tr>
  918. </thead>
  919. <tbody>
  920. <tr>
  921. <td>position</td>
  922. <td>\u6307\u5B9A\u5206\u9875\u663E\u793A\u7684\u4F4D\u7F6E</td>
  923. <td>'top' | 'bottom' | 'both'</td>
  924. <td>'bottom'</td>
  925. </tr>
  926. </tbody>
  927. </table>
  928. <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>
  929. <h3 id="List-grid-props">List grid props <a class="header-anchor" href="#List-grid-props">
  930. <span aria-hidden="true" class="anchor">#</span>
  931. </a></h3>
  932. <table>
  933. <thead>
  934. <tr>
  935. <th>\u53C2\u6570</th>
  936. <th>\u8BF4\u660E</th>
  937. <th>\u7C7B\u578B</th>
  938. <th>\u9ED8\u8BA4\u503C</th>
  939. <th>\u7248\u672C</th>
  940. </tr>
  941. </thead>
  942. <tbody>
  943. <tr>
  944. <td>column</td>
  945. <td>\u5217\u6570</td>
  946. <td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td>
  947. <td>-</td>
  948. <td></td>
  949. </tr>
  950. <tr>
  951. <td>gutter</td>
  952. <td>\u6805\u683C\u95F4\u9694</td>
  953. <td>number</td>
  954. <td>0</td>
  955. <td></td>
  956. </tr>
  957. <tr>
  958. <td>xxxl</td>
  959. <td><code>\u22652000px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  960. <td>number</td>
  961. <td>-</td>
  962. <td>3.0</td>
  963. </tr>
  964. <tr>
  965. <td>xs</td>
  966. <td><code>&lt;576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  967. <td>number</td>
  968. <td>-</td>
  969. <td></td>
  970. </tr>
  971. <tr>
  972. <td>sm</td>
  973. <td><code>\u2265576px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  974. <td>number</td>
  975. <td>-</td>
  976. <td></td>
  977. </tr>
  978. <tr>
  979. <td>md</td>
  980. <td><code>\u2265768px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  981. <td>number</td>
  982. <td>-</td>
  983. <td></td>
  984. </tr>
  985. <tr>
  986. <td>lg</td>
  987. <td><code>\u2265992px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  988. <td>number</td>
  989. <td>-</td>
  990. <td></td>
  991. </tr>
  992. <tr>
  993. <td>xl</td>
  994. <td><code>\u22651200px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  995. <td>number</td>
  996. <td>-</td>
  997. <td></td>
  998. </tr>
  999. <tr>
  1000. <td>xxl</td>
  1001. <td><code>\u22651600px</code> \u5C55\u793A\u7684\u5217\u6570</td>
  1002. <td>number</td>
  1003. <td>-</td>
  1004. <td></td>
  1005. </tr>
  1006. </tbody>
  1007. </table>
  1008. <h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item">
  1009. <span aria-hidden="true" class="anchor">#</span>
  1010. </a></h3>
  1011. <table>
  1012. <thead>
  1013. <tr>
  1014. <th>\u53C2\u6570</th>
  1015. <th>\u8BF4\u660E</th>
  1016. <th>\u7C7B\u578B</th>
  1017. <th>\u9ED8\u8BA4\u503C</th>
  1018. <th>\u7248\u672C</th>
  1019. </tr>
  1020. </thead>
  1021. <tbody>
  1022. <tr>
  1023. <td>actions</td>
  1024. <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>
  1025. <td>vNode[] | slot</td>
  1026. <td>-</td>
  1027. <td></td>
  1028. </tr>
  1029. <tr>
  1030. <td>extra</td>
  1031. <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>
  1032. <td>string|slot</td>
  1033. <td>-</td>
  1034. <td></td>
  1035. </tr>
  1036. </tbody>
  1037. </table>
  1038. <h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta">
  1039. <span aria-hidden="true" class="anchor">#</span>
  1040. </a></h3>
  1041. <table>
  1042. <thead>
  1043. <tr>
  1044. <th>\u53C2\u6570</th>
  1045. <th>\u8BF4\u660E</th>
  1046. <th>\u7C7B\u578B</th>
  1047. <th>\u9ED8\u8BA4\u503C</th>
  1048. </tr>
  1049. </thead>
  1050. <tbody>
  1051. <tr>
  1052. <td>avatar</td>
  1053. <td>\u5217\u8868\u5143\u7D20\u7684\u56FE\u6807</td>
  1054. <td>slot</td>
  1055. <td>-</td>
  1056. </tr>
  1057. <tr>
  1058. <td>description</td>
  1059. <td>\u5217\u8868\u5143\u7D20\u7684\u63CF\u8FF0\u5185\u5BB9</td>
  1060. <td>string|slot</td>
  1061. <td>-</td>
  1062. </tr>
  1063. <tr>
  1064. <td>title</td>
  1065. <td>\u5217\u8868\u5143\u7D20\u7684\u6807\u9898</td>
  1066. <td>string|slot</td>
  1067. <td>-</td>
  1068. </tr>
  1069. </tbody>
  1070. </table>
  1071. `,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:`
  1072. Simple List.
  1073. ## When To Use
  1074. 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.
  1075. ## API
  1076. ### List
  1077. | Property | Description | Type | Default | Version | |
  1078. | --- | --- | --- | --- | --- | --- |
  1079. | bordered | Toggles rendering of the border around the list | boolean | false | | |
  1080. | dataSource | dataSource array for list | any\\[] | - | 3.20.1 | |
  1081. | footer | List footer renderer | string\\|slot | - | | |
  1082. | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | |
  1083. | header | List header renderer | string\\|slot | - | | |
  1084. | itemLayout | The layout of list, default is \`horizontal\`, If a vertical list is desired, set the itemLayout property to \`vertical\` | string | - | | |
  1085. | loading | Shows a loading indicator while the contents of the list are being fetched | boolean\\|[object](https://www.antdv.com/components/spin/#API) | false | | |
  1086. | loadMore | Shows a load more content | string\\|slot | - | | |
  1087. | locale | i18n text including empty text | object | emptyText: &#39;No Data&#39; &lt;br&gt; | | |
  1088. | pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \\| object | false | | |
  1089. | renderItem | Custom item renderer, #renderItem=&quot;{item, index}&quot; | ({item, index}) =&gt; vNode | | - | |
  1090. | rowKey | Item&#39;s unique key, could be a string or function that returns a string | string\\|Function(record):string | \`key\` | | |
  1091. | split | Toggles rendering of the split under the list item | boolean | true | | |
  1092. ### pagination
  1093. Properties for pagination.
  1094. | Property | Description | Type | Default |
  1095. | -------- | ------------------------------------ | --------------------------- | -------- |
  1096. | position | specify the position of \`Pagination\` | &#39;top&#39; \\| &#39;bottom&#39; \\| &#39;both&#39; | &#39;bottom&#39; |
  1097. More about pagination, please check [\`Pagination\`](https://www.antdv.com/components/pagination/#API).
  1098. ### List grid props
  1099. | Property | Description | Type | Default | Version |
  1100. | --- | --- | --- | --- | --- |
  1101. | column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
  1102. | gutter | spacing between grid | number | 0 | |
  1103. | size | Size of list | \`default\` \\| \`middle\` \\| \`small\` | \`default\` | |
  1104. | xxxl | \`\u22652000px\` column of grid | number | - | 3.0 |
  1105. | xs | \`&lt;576px\` column of grid | number | - | |
  1106. | sm | \`\u2265576px\` column of grid | number | - | |
  1107. | md | \`\u2265768px\` column of grid | number | - | |
  1108. | lg | \`\u2265992px\` column of grid | number | - | |
  1109. | xl | \`\u22651200px\` column of grid | number | - | |
  1110. | xxl | \`\u22651600px\` column of grid | number | - | |
  1111. ### List.Item
  1112. | Property | Description | Type | Default | Version |
  1113. | --- | --- | --- | --- | --- |
  1114. | 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 | - | |
  1115. | 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 | - | |
  1116. ### List.Item.Meta
  1117. | Property | Description | Type | Default |
  1118. | ----------- | ---------------------------- | ------------ | ------- |
  1119. | avatar | The avatar of list item | slot | - |
  1120. | description | The description of list item | string\\|slot | - |
  1121. | title | The title of list item | string\\|slot | - |
  1122. `,html:`<p>Simple List.</p>
  1123. <h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
  1124. <span aria-hidden="true" class="anchor">#</span>
  1125. </a></h2>
  1126. <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>
  1127. <h2 id="API">API <a class="header-anchor" href="#API">
  1128. <span aria-hidden="true" class="anchor">#</span>
  1129. </a></h2>
  1130. <h3 id="List">List <a class="header-anchor" href="#List">
  1131. <span aria-hidden="true" class="anchor">#</span>
  1132. </a></h3>
  1133. <table>
  1134. <thead>
  1135. <tr>
  1136. <th>Property</th>
  1137. <th>Description</th>
  1138. <th>Type</th>
  1139. <th>Default</th>
  1140. <th>Version</th>
  1141. <th></th>
  1142. </tr>
  1143. </thead>
  1144. <tbody>
  1145. <tr>
  1146. <td>bordered</td>
  1147. <td>Toggles rendering of the border around the list</td>
  1148. <td>boolean</td>
  1149. <td>false</td>
  1150. <td></td>
  1151. <td></td>
  1152. </tr>
  1153. <tr>
  1154. <td>dataSource</td>
  1155. <td>dataSource array for list</td>
  1156. <td>any[]</td>
  1157. <td>-</td>
  1158. <td>3.20.1</td>
  1159. <td></td>
  1160. </tr>
  1161. <tr>
  1162. <td>footer</td>
  1163. <td>List footer renderer</td>
  1164. <td>string|slot</td>
  1165. <td>-</td>
  1166. <td></td>
  1167. <td></td>
  1168. </tr>
  1169. <tr>
  1170. <td>grid</td>
  1171. <td>The grid type of list. You can set grid to something like {gutter: 16, column: 4}</td>
  1172. <td>object</td>
  1173. <td>-</td>
  1174. <td></td>
  1175. <td></td>
  1176. </tr>
  1177. <tr>
  1178. <td>header</td>
  1179. <td>List header renderer</td>
  1180. <td>string|slot</td>
  1181. <td>-</td>
  1182. <td></td>
  1183. <td></td>
  1184. </tr>
  1185. <tr>
  1186. <td>itemLayout</td>
  1187. <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>
  1188. <td>string</td>
  1189. <td>-</td>
  1190. <td></td>
  1191. <td></td>
  1192. </tr>
  1193. <tr>
  1194. <td>loading</td>
  1195. <td>Shows a loading indicator while the contents of the list are being fetched</td>
  1196. <td>boolean|<a href="https://www.antdv.com/components/spin/#API" target="_blank" rel="noopener noreferrer">object</a></td>
  1197. <td>false</td>
  1198. <td></td>
  1199. <td></td>
  1200. </tr>
  1201. <tr>
  1202. <td>loadMore</td>
  1203. <td>Shows a load more content</td>
  1204. <td>string|slot</td>
  1205. <td>-</td>
  1206. <td></td>
  1207. <td></td>
  1208. </tr>
  1209. <tr>
  1210. <td>locale</td>
  1211. <td>i18n text including empty text</td>
  1212. <td>object</td>
  1213. <td>emptyText: 'No Data' <br></td>
  1214. <td></td>
  1215. <td></td>
  1216. </tr>
  1217. <tr>
  1218. <td>pagination</td>
  1219. <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>
  1220. <td>boolean | object</td>
  1221. <td>false</td>
  1222. <td></td>
  1223. <td></td>
  1224. </tr>
  1225. <tr>
  1226. <td>renderItem</td>
  1227. <td>Custom item renderer, #renderItem=&quot;{item, index}&quot;</td>
  1228. <td>({item, index}) =&gt; vNode</td>
  1229. <td></td>
  1230. <td>-</td>
  1231. <td></td>
  1232. </tr>
  1233. <tr>
  1234. <td>rowKey</td>
  1235. <td>Item's unique key, could be a string or function that returns a string</td>
  1236. <td>string|Function(record):string</td>
  1237. <td><code>key</code></td>
  1238. <td></td>
  1239. <td></td>
  1240. </tr>
  1241. <tr>
  1242. <td>split</td>
  1243. <td>Toggles rendering of the split under the list item</td>
  1244. <td>boolean</td>
  1245. <td>true</td>
  1246. <td></td>
  1247. <td></td>
  1248. </tr>
  1249. </tbody>
  1250. </table>
  1251. <h3 id="pagination">pagination <a class="header-anchor" href="#pagination">
  1252. <span aria-hidden="true" class="anchor">#</span>
  1253. </a></h3>
  1254. <p>Properties for pagination.</p>
  1255. <table>
  1256. <thead>
  1257. <tr>
  1258. <th>Property</th>
  1259. <th>Description</th>
  1260. <th>Type</th>
  1261. <th>Default</th>
  1262. </tr>
  1263. </thead>
  1264. <tbody>
  1265. <tr>
  1266. <td>position</td>
  1267. <td>specify the position of <code>Pagination</code></td>
  1268. <td>'top' | 'bottom' | 'both'</td>
  1269. <td>'bottom'</td>
  1270. </tr>
  1271. </tbody>
  1272. </table>
  1273. <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>
  1274. <h3 id="List-grid-props">List grid props <a class="header-anchor" href="#List-grid-props">
  1275. <span aria-hidden="true" class="anchor">#</span>
  1276. </a></h3>
  1277. <table>
  1278. <thead>
  1279. <tr>
  1280. <th>Property</th>
  1281. <th>Description</th>
  1282. <th>Type</th>
  1283. <th>Default</th>
  1284. <th>Version</th>
  1285. </tr>
  1286. </thead>
  1287. <tbody>
  1288. <tr>
  1289. <td>column</td>
  1290. <td>column of grid</td>
  1291. <td>number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]</td>
  1292. <td>-</td>
  1293. <td></td>
  1294. </tr>
  1295. <tr>
  1296. <td>gutter</td>
  1297. <td>spacing between grid</td>
  1298. <td>number</td>
  1299. <td>0</td>
  1300. <td></td>
  1301. </tr>
  1302. <tr>
  1303. <td>size</td>
  1304. <td>Size of list</td>
  1305. <td><code>default</code> | <code>middle</code> | <code>small</code></td>
  1306. <td><code>default</code></td>
  1307. <td></td>
  1308. </tr>
  1309. <tr>
  1310. <td>xxxl</td>
  1311. <td><code>\u22652000px</code> column of grid</td>
  1312. <td>number</td>
  1313. <td>-</td>
  1314. <td>3.0</td>
  1315. </tr>
  1316. <tr>
  1317. <td>xs</td>
  1318. <td><code>&lt;576px</code> column of grid</td>
  1319. <td>number</td>
  1320. <td>-</td>
  1321. <td></td>
  1322. </tr>
  1323. <tr>
  1324. <td>sm</td>
  1325. <td><code>\u2265576px</code> column of grid</td>
  1326. <td>number</td>
  1327. <td>-</td>
  1328. <td></td>
  1329. </tr>
  1330. <tr>
  1331. <td>md</td>
  1332. <td><code>\u2265768px</code> column of grid</td>
  1333. <td>number</td>
  1334. <td>-</td>
  1335. <td></td>
  1336. </tr>
  1337. <tr>
  1338. <td>lg</td>
  1339. <td><code>\u2265992px</code> column of grid</td>
  1340. <td>number</td>
  1341. <td>-</td>
  1342. <td></td>
  1343. </tr>
  1344. <tr>
  1345. <td>xl</td>
  1346. <td><code>\u22651200px</code> column of grid</td>
  1347. <td>number</td>
  1348. <td>-</td>
  1349. <td></td>
  1350. </tr>
  1351. <tr>
  1352. <td>xxl</td>
  1353. <td><code>\u22651600px</code> column of grid</td>
  1354. <td>number</td>
  1355. <td>-</td>
  1356. <td></td>
  1357. </tr>
  1358. </tbody>
  1359. </table>
  1360. <h3 id="List-Item">List.Item <a class="header-anchor" href="#List-Item">
  1361. <span aria-hidden="true" class="anchor">#</span>
  1362. </a></h3>
  1363. <table>
  1364. <thead>
  1365. <tr>
  1366. <th>Property</th>
  1367. <th>Description</th>
  1368. <th>Type</th>
  1369. <th>Default</th>
  1370. <th>Version</th>
  1371. </tr>
  1372. </thead>
  1373. <tbody>
  1374. <tr>
  1375. <td>actions</td>
  1376. <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>
  1377. <td>vNode[] |slot</td>
  1378. <td>-</td>
  1379. <td></td>
  1380. </tr>
  1381. <tr>
  1382. <td>extra</td>
  1383. <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>
  1384. <td>string|slot</td>
  1385. <td>-</td>
  1386. <td></td>
  1387. </tr>
  1388. </tbody>
  1389. </table>
  1390. <h3 id="List-Item-Meta">List.Item.Meta <a class="header-anchor" href="#List-Item-Meta">
  1391. <span aria-hidden="true" class="anchor">#</span>
  1392. </a></h3>
  1393. <table>
  1394. <thead>
  1395. <tr>
  1396. <th>Property</th>
  1397. <th>Description</th>
  1398. <th>Type</th>
  1399. <th>Default</th>
  1400. </tr>
  1401. </thead>
  1402. <tbody>
  1403. <tr>
  1404. <td>avatar</td>
  1405. <td>The avatar of list item</td>
  1406. <td>slot</td>
  1407. <td>-</td>
  1408. </tr>
  1409. <tr>
  1410. <td>description</td>
  1411. <td>The description of list item</td>
  1412. <td>string|slot</td>
  1413. <td>-</td>
  1414. </tr>
  1415. <tr>
  1416. <td>title</td>
  1417. <td>The title of list item</td>
  1418. <td>string|slot</td>
  1419. <td>-</td>
  1420. </tr>
  1421. </tbody>
  1422. </table>
  1423. `,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};