Skip to content

特有组件示例 Alpha

🚧警告🚧

本页面所有控件均处于WIP状态,随时可能进行破坏性更改

LinkCard 示例

LargeLinkCard 示例

EmojiTextIcon

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

ImageIcon

md
<LargeLinkCard title="VMTU" desc="图片图标示例" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon

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

WithoutDesc

md
<LargeLinkCard title="Github (VMTUCore)" href="https://github.com/VM-Chinese-translate-group/VMTUCore" iconify="simple-icons:github" :external="true"/>

MediumLinkCard 示例

EmojiTextIcon

md
<MediumLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MediumLinkCard title="VMTU" href="/vmtu/index" icon="🧭" />
<MediumLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon

md
<MediumLinkCard title="VMTU" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon

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

WithDesc

md
<MediumLinkCard title="Github" desc="VMTUCore" href="https://github.com/VM-Chinese-translate-group/VMTUCore" iconify="simple-icons:github" :external="true"/>

MiniLinkCard 示例

EmojiTextIcon

md
<MiniLinkCard title="FAQ" href="/guide/faq" icon="❓" />
<MiniLinkCard title="VMTU" href="/vmtu/index" icon="🧭" />
<MiniLinkCard title="Vue 官网" href="https://vuejs.org/" icon="🟢" :external="true" />

ImageIcon

md
<MiniLinkCard title="VMTU" href="/vmtu/index" iconSrc="/img/example/icon.png" />

IconifyIcon

md
<MiniLinkCard title="Modrinth" href="https://modrinth.com/mod/vmupdate" 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: '+' }
          ]
        }
      ]
    }
  ]"
/>