特有组件示例 Alpha

LinkCard 示例

LargeLinkCard 示例

EmojiTextIcon

📘查看文档规范统一命名、结构和维护方式。🟢Vue 官方网站外部链接示例，会在新窗口打开。

md

<LargeLinkCard title="查看文档规范" desc="统一命名、结构和维护方式。" href="/guide/conventions" icon="📘"/>
<LargeLinkCard title="Vue 官方网站" desc="外部链接示例，会在新窗口打开。" href="https://vuejs.org/" icon="🟢" :external="true"/>

ImageIcon

空中厕所图片图标示例

md

<LargeLinkCard title="空中厕所" desc="图片图标示例" href="/poopsky/index" iconSrc="/img/logo.png" />

IconifyIcon

ModrinthIconify图标示例

md

<LargeLinkCard title="Modrinth" desc="Iconify图标示例" href="https://modrinth.com/mod/poopsky" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true" />

WithoutDesc

Github

md

<LargeLinkCard title="Github" href="https://github.com/Altnoir/PoopSkyMod" iconify="simple-icons:github" :external="true"/>

MediumLinkCard 示例

EmojiTextIcon

❓

FAQ

🧭

空中厕所

🟢

Vue 官网

md

<MediumLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MediumLinkCard title="空中厕所" href="/poopsky/index" icon="🧭" />
<MediumLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon

空中厕所

md

<MediumLinkCard title="空中厕所" href="/poopsky/index" iconSrc="/img/logo.png" />

IconifyIcon

Modrinth

md

<MediumLinkCard title="Modrinth" href="https://modrinth.com/mod/poopsky" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true" />

WithDesc

Github空中厕所

md

<MediumLinkCard title="Github" desc="空中厕所" href="https://github.com/Altnoir/PoopSkyMod" iconify="simple-icons:github" :external="true"/>

MiniLinkCard 示例

EmojiTextIcon

❓FAQ🧭空中厕所🟢Vue 官网

md

<MiniLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MiniLinkCard title="空中厕所" href="/poopsky/index" icon="🧭" />
<MiniLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon

空中厕所

md

<MiniLinkCard title="空中厕所" href="/poopsky/index" iconSrc="/img/example/icon.png" />

IconifyIcon

Modrinth

md

<MiniLinkCard title="Modrinth" href="https://modrinth.com/mod/poopsky" iconify="simple-icons:modrinth" iconifyColor="#60e499" :external="true"/>

FileTree 示例

带标识的目录

• • iindex.md
  • • -getting-started.md
    • +conventions.md

md

<FileTree title="带标识的目录" :items="[
    {
      name: 'docs',
      type: 'folder',
      children: [
        { name: 'index.md', type: 'file', flag: 'i' },
        {
          name: 'guide',
          type: 'folder',
          children: [
            { name: 'getting-started.md', type: 'file', flag: '-' },
            { name: 'conventions.md', type: 'file', flag: '+' }
          ]
        }
      ]
    }
  ]"
/>