mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-05-01 12:38:12 +08:00
13 lines
11 KiB
JavaScript
13 lines
11 KiB
JavaScript
import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/components/card-grid/","title":"卡片容器 | 指南","lang":"zh-CN","frontmatter":{"title":"卡片容器","icon":"vaadin:grid-h","createTime":"2024/08/18 23:38:33","permalink":"/guide/components/card-grid/","description":"概述 当你需要将多个卡片排列，可以使用 <CardGrid> 组件。在空间足够时，多个卡片会自动排列。 Props 示例 输入： 输出：","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"卡片容器\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/components/card-grid/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"卡片容器"}],["meta",{"property":"og:description","content":"概述 当你需要将多个卡片排列，可以使用 <CardGrid> 组件。在空间足够时，多个卡片会自动排列。 Props 示例 输入： 输出："}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/components/card-grid/"}]]},"readingTime":{"minutes":1.03,"words":310},"git":{"createdTime":1724002416000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"d14961d038bc1a13318ce14ee9fe25a8b2c9ac99","time":1746023641000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update docs"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"e3b1c3cc531ac9e163ec809c2a3ccdc35b12a4bb","time":1724002416000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: improve docs"}]},"autoDesc":true,"filePathRelative":"guide/components/card-grid.md","headers":[],"bulletin":false}`),u={name:`card-grid.md`},d={class:`vp-field-group`};function f(c,l,u,f,p,m){let h=t(`VPField`),g=t(`Card`),_=t(`CardGrid`,!0),v=t(`LinkCard`);return n(),i(`div`,null,[l[3]||=s(`h2`,{id:`概述`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#概述`},[s(`span`,null,`概述`)])],-1),l[4]||=s(`p`,null,[a(`当你需要将多个卡片排列，可以使用 `),s(`code`,null,`<CardGrid>`),a(` 组件。在空间足够时，多个卡片会自动排列。`)],-1),l[5]||=s(`h2`,{id:`props`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#props`},[s(`span`,null,`Props`)])],-1),s(`div`,d,[r(h,{name:`cols`,type:`number | { sm: number, md: number, lg: number }`,"default-value":`2`},{default:e(()=>[...l[0]||=[s(`p`,null,`卡片排列列数。`,-1),s(`p`,null,`组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示双列，小屏幕下显示单列。`,-1),s(`p`,null,[a(`你可以通过 `),s(`code`,null,`cols`),a(` 配置列数。当传入 `),s(`code`,null,`number`),a(` 时，所有尺寸均显示为 `),s(`code`,null,`number`),a(` 个卡片。 传入 `),s(`code`,null,`{ sm: number, md: number, lg: number }`),a(` 时，根据屏幕宽度自动调整列数。`)],-1),s(`ul`,null,[s(`li`,null,[s(`code`,null,`sm`),a(` : `),s(`code`,null,`< 768px`)]),s(`li`,null,[s(`code`,null,`md`),a(` : `),s(`code`,null,`>= 768px < 960px`)]),s(`li`,null,[s(`code`,null,`lg`),a(` : `),s(`code`,null,`>= 960px`)])],-1),s(`p`,null,[a(`建议传入的 `),s(`code`,null,`number`),a(` 不超过 `),s(`code`,null,`3`),a(`。`)],-1)]]),_:1})]),l[6]||=o(`<h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><p><strong>输入：</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">CardGrid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Card</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">twemoji:astonished-face</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 这里是卡片内容。</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Card</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">twemoji:astonished-face</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> 这里是卡片内容。</span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">Card</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">CardGrid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">CardGrid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">LinkCard</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> icon</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">twemoji:astonished-face</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">卡片标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> /></span></span>
|
|
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">CardGrid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre></div><p><strong>输出：</strong></p>`,4),r(_,null,{default:e(()=>[r(g,{title:`卡片标题`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[1]||=[a(` 这里是卡片内容。 `,-1)]]),_:1}),r(g,{title:`卡片标题`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[2]||=[a(` 这里是卡片内容。 `,-1)]]),_:1})]),_:1}),r(_,null,{default:e(()=>[r(v,{title:`链接卡片`,href:`/`}),r(v,{icon:`twemoji:astonished-face`,title:`链接卡片`,href:`/`})]),_:1})])}var p=c(u,[[`render`,f]]);export{l as _pageData,p as default}; |