组件使用指南 • Kylaan

1. Aside (提示块)

用于显示警告、提示或说明信息。

<Aside>默认提示</Aside>
<Aside type="tip">提示信息</Aside>
<Aside type="caution">警告信息</Aside>
<Aside type="danger">危险信息</Aside>

tsx

用于隐藏剧透内容，鼠标悬停时显示。

<Spoiler>剧透警告：凶手是...</Spoiler>

tsx

真相是：你被骗了！

不同样式的按钮组件。

<Button title="Default Button" href="#" />
<Button title="Pill Button" href="#" variant="pill" />

tsx

Github

Pill Style

用于并在不同选项卡之间切换内容。

<Tabs>
  <TabItem label="Npm">
    npm install astro
  </TabItem>
  <TabItem label="Pnpm">
    pnpm add astro
  </TabItem>
</Tabs>

tsx

npm install astro

pnpm add astro

yarn add astro

展示时间节点事件。

<Timeline
  events={[
    { date: '2024-01-01', content: '项目启动' },
    { date: '2024-02-15', content: '发布 v1.0' },
  ]}
/>

tsx

用于展示有序的步骤。

<Steps>
1. 第一步
2. 第二步
3. 第三步
</Steps>

tsx

可折叠的内容区域。

<Collapse title="点击展开详情">
  这里是详细内容...
</Collapse>

tsx

查看详细配置

{
  "code": 200,
  "msg": "success"
}

json

展示卡片式链接或内容。

<Card heading="Astro" subheading="The web framework" href="https://astro.build">
  Astro powers the world's fastest websites.
</Card>

tsx

Theme

2024

一个简洁优雅的 Astro 博客主题。

Description

卡片内容区域。

带图标的标签文本。

<Label title="My Label">
    <svg slot="icon">...</svg>
</Label>

tsx

已验证用户

点击跳转