mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
10 lines
8.0 KiB
JavaScript
10 lines
8.0 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":"/en/guide/components/card/","title":"Card | Guide","lang":"en-US","frontmatter":{"title":"Card","icon":"solar:card-broken","createTime":"2025/10/08 23:09:07","permalink":"/en/guide/components/card/","description":"Overview Use the <Card> component to display cards within a page. Alternatively, the markdown syntax can be used as a substitute for the <Card> component. Props Slot...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Card\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/components/card/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Card"}],["meta",{"property":"og:description","content":"Overview Use the <Card> component to display cards within a page. Alternatively, the markdown syntax can be used as a substitute for the <Card> component. Props Slot..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/components/card/"}]]},"readingTime":{"minutes":0.65,"words":196},"git":{"createdTime":1759995965000,"updatedTime":1759995965000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/components/card.md","headers":[],"bulletin":false}`),u={name:`card.md`},d={class:`vp-field-group`};function f(c,l,u,f,p,m){let h=t(`VPLink`),g=t(`VPField`),_=t(`Card`,!0);return n(),i(`div`,null,[l[10]||=s(`h2`,{id:`overview`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#overview`},[s(`span`,null,`Overview`)])],-1),l[11]||=s(`p`,null,[a(`Use the `),s(`code`,null,`<Card>`),a(` component to display cards within a page.`)],-1),s(`p`,null,[l[1]||=a(`Alternatively, the markdown `,-1),r(h,{href:`../markdown/card.md`},{default:e(()=>[...l[0]||=[a(`card container`,-1)]]),_:1}),l[2]||=a(` syntax can be used as a substitute for the `,-1),l[3]||=s(`code`,null,`<Card>`,-1),l[4]||=a(` component.`,-1)]),l[12]||=s(`h2`,{id:`props`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#props`},[s(`span`,null,`Props`)])],-1),s(`div`,d,[r(g,{name:`title`,optional:``,type:`string`,"default-value":``},{default:e(()=>[...l[5]||=[s(`p`,null,`Card title.`,-1)]]),_:1}),r(g,{name:`icon`,optional:``,type:`string | { svg: string }`,"default-value":``},{default:e(()=>[...l[6]||=[s(`p`,null,`Icon displayed to the left of the title. Supports all icons from iconify, or an image URL can be used.`,-1)]]),_:1})]),l[13]||=o(`<h2 id="slots" tabindex="-1"><a class="header-anchor" href="#slots"><span>Slots</span></a></h2><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td>Card content.</td></tr><tr><td>title</td><td>Custom title content.</td></tr></tbody></table><h2 id="examples" tabindex="-1"><a class="header-anchor" href="#examples"><span>Examples</span></a></h2><p><strong>Input:</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;">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;">Card Title</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;"> This is the card content.</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>
|
|
<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;">template</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> #title</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;">p</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> style</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;">color: red</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">Card Title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">p</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;">template</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
|
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> This is the card content.</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></code></pre></div><p><strong>Output:</strong></p>`,6),r(_,{title:`Card Title`,icon:`twemoji:astonished-face`},{default:e(()=>[...l[7]||=[a(` This is the card content. `,-1)]]),_:1}),r(_,null,{title:e(()=>[...l[8]||=[s(`p`,{style:{color:`red`,margin:`0`}},`Card Title`,-1)]]),default:e(()=>[l[9]||=a(` This is the card content. `,-1)]),_:1}),l[14]||=s(`div`,{class:`hint-container info`},[s(`p`,{class:`hint-container-title`},`Info`),s(`p`,null,`Markdown syntax can also be used inside slots. However, please note that an empty line is required between the markdown syntax and the tags. Otherwise, it will be interpreted as plain text.`)],-1)])}var p=c(u,[[`render`,f]]);export{l as _pageData,p as default}; |