用户组件
轻松扩展你的内容页面，使其更具交互性
组件让你可以轻松地重复使用一段 UI 或保持一致的样式。你不仅可以在 .astro 文件中使用它们，还可以在 .mdx 文件中使用。
对于 .astro 文件，你可以直接导入并使用组件。第一节中也会展示一个示例。
容器组件#
Card（卡片）#
import { Card } from 'astro-pure/user'
<Card
as='a'
href='#card'
heading='Lorem ipsum'
subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
date='August 2021'
>
你甚至可以在这里包含一个列表
</Card>---
import { Card } from 'astro-pure/user'
---
<!-- ... -->
<Card
as='a'
href='#card'
heading='Lorem ipsum'
subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
date='August 2021'
>
你甚至可以在这里包含一个列表
</Card>Collapse（折叠面板）#
import { Collapse } from 'astro-pure/user'
<Collapse title='Lorem ipsum'>Lorem ipsum dolor sit amet, vidit suscipit at mei.</Collapse>
<Collapse title='Lorem ipsum'>
<div slot='before' class='mt-2'>你确定要看吗？</div>
<div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>
</Collapse>Aside（侧边提示）#
import { Aside } from 'astro-pure/user'
<Aside>不选择类型时默认是 'note'。😉</Aside>
<Aside type="tip">
侧边提示中也支持其他内容！😍
// ```js
// 例如，一段代码片段。
// ```
</Aside>
<Aside type='caution' title='你应该知道这个！'>你的代码又出 bug 了吗？🤨</Aside>
<Aside type='danger'>你是不是用 `rm -rf` 清理电脑了？😡</Aside>这个组件还有支持 remark 的版本（可以直接在 .md 中使用），但本主题未集成。你可以参考 packages/starlight/integrations/asides.ts ↗ 中的示例代码。
:::tip
这个主题的作者是个好人。
:::Tabs（标签页）#
import { Tabs, TabItem } from 'astro-pure/user';
<Tabs>
<TabItem label="恒星">天狼星、织女星、参宿四</TabItem>
<TabItem label="卫星">木卫一、木卫二、木卫三</TabItem>
</Tabs>MDX 代码演示（MdxRepl）#
你好
<p>你好</p>import { MdxRepl } from 'astro-pure/user'
// 宽度是可选的；使用 width 参数设置
// MDX Repl 组件内的所有元素。
//（插槽 desc 不受此参数影响）
<MdxRepl width='100%'>
<p>你好</p>
<Fragment slot='desc'>
```html
<p>你好</p>
```
</Fragment>
</MdxRepl>你可以在 desc 插槽中组合任何其他组件。并且 <Fragment> 不会被渲染为父级 html 容器标签。
列表组件#
CardList（卡片列表）#
一个列表
- Lorem ipsum
-
Dolor sit amet
import { CardList } from 'astro-pure/user'
<CardList title='一个列表' list={
[{title: '我被隐藏了！'}]
} collapse />
<CardList title='一个列表' list={
[
{ title: 'Lorem ipsum', link: '#list' },
{ title: 'Dolor sit amet', children: [{
title: 'Vidit suscipit', link: '#'
}] }
]
} />Timeline（时间线）#
- 2021年8月你好
- 2022年8月世界！
import { Timeline } from 'astro-pure/user'
<Timeline events={
[
{ date: '2021年8月', content: '你好' },
{ date: '2022年8月', content: '<i>世界！</i>' },
]
} />Steps（步骤）#
如何一键三连：
-
点赞
-
投币
-
收藏
有时候也可以关注。
import { Steps } from 'astro-pure/user'
如何一键三连：
<Steps>
1. 点赞
2. 投币
3. 收藏
有时候也可以关注。
</Steps>简单文本渲染#
Button（按钮）#
import { Button } from 'astro-pure/user'
<div class='flex gap-x-2'>
<Button as='div' title='简单按钮' />
<Button as='a' href='#button' title='链接样式' variant='ahead' class='not-prose' />
<Button as='div' title='返回' variant='back' />
<Button as='div' title='胶囊样式' variant='pill' />
<Button as='div' variant='pill'><i>斜体</i></Button>
</div>Spoiler（剧透/隐藏内容）#
没人能找到我。 但我在这里暴露了。
import { Spoiler } from 'astro-pure/user'
<Spoiler>没人能找到我。</Spoiler> 但我在这里暴露了。Formatted Date（格式化日期）#
import { FormattedDate } from 'astro-pure/user'
<FormattedDate date={new Date('2021-08-01')} dateTimeOptions={{ month: 'short' }} />Label（标签）#
你好
import { Label } from 'astro-pure/user'
<Label title='你好' />SVG 加载器（SVG Loader）#
import { Svg } from 'astro-pure/user'
<Svg src={import('@/assets/icons/key.svg?raw')} />资源组件#
Icon（图标）#
单独使用：
预览所有可用图标（点击按钮复制）：
import { Icon } from 'astro-pure/user'
单独使用：<Icon name='rss' class='inline' />
预览所有可用图标（点击按钮复制）：
import { Icons as allIcons } from 'astro-pure/libs'
import { Button } from 'astro-pure/user'
<div class='flex flex-wrap gap-2'>
{
Object.keys(allIcons).map(icon => {
const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'已复制 "${icon}" 到剪贴板!'}}))`
return (
<Button as='button' type='button' class='cursor-pointer' onclick={script}>
<Icon slot='before' name={icon} />
<span>{icon}</span>
</Button>
)
})
}
</div>还有一些 高级组件 可能适合你。希望你喜欢使用这些组件！