用户组件
轻松扩展你的内容页面，使其更具交互性
组件让你能够轻松地一致复用一段 UI 或样式。你不仅可以在 .astro 文件中使用它们，还可以在 .mdx 文件中使用。
对于 .astro，你可以直接导入并使用组件。第一部分也会展示一个示例。
容器#
卡片#
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='2021年8月'
>
你甚至可以在这里包含一个列表
</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='2021年8月'
>
你甚至可以在这里包含一个列表
</Card>折叠#
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>提示框#
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
本主题作者是个好人。
:::标签页#
import { Tabs, TabItem } from 'astro-pure/user';
<Tabs>
<TabItem label="星星">天狼星、织女星、参宿四</TabItem>
<TabItem label="卫星">木卫一、木卫二、木卫三</TabItem>
</Tabs>MDX 演示#
你好
<p>你好</p>import { MdxRepl } from 'astro-pure/user'
// width 是可选的；使用 width 参数设置
// MDX Repl 组件内的所有元素。
// （desc 插槽不受此参数影响）
<MdxRepl width='100%'>
<p>你好</p>
<Fragment slot='desc'>
```html
<p>你好</p>
```
</Fragment>
</MdxRepl>你可以为 desc 插槽组合任何其他组件。<Fragment> 不会作为父 HTML 容器标签被渲染。
列表#
卡片列表#
一个列表
- 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: '#'
}] }
]
} />时间线#
- 2021年8月你好
- 2022年8月世界！
import { Timeline } from 'astro-pure/user'
<Timeline events={
[
{ date: '2021年8月', content: '你好' },
{ date: '2022年8月', content: '<i>世界！</i>' },
]
} />步骤#
如何一键三连：
-
点赞
-
投币
-
收藏
有时也关注一下。
import { Steps } from 'astro-pure/user'
如何一键三连：
<Steps>
1. 点赞
2. 投币
3. 收藏
有时也关注一下。
</Steps>若出现错误：
The <Steps> component expects its content to be a single ordered list (<ol>) but found multiple child elements: <ol>, <p>, <div>, <ol>.尝试增加步骤内组件的缩进深度
简单文本渲染#
按钮#
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>黑条#
没人能找到我。 但我在这里暴露了。
import { Spoiler } from 'astro-pure/user'
<Spoiler>没人能找到我。</Spoiler> 但我在这里暴露了。格式化日期#
import { FormattedDate } from 'astro-pure/user'
<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />标签#
你好
import { Label } from 'astro-pure/user'
<Label title='你好' />SVG 加载器#
import { Svg } from 'astro-pure/user'
<Svg src={import('@/assets/icons/key.svg?raw')} />资源#
图标#
单独使用：
预览所有可用图标（点击按钮复制）：
import { Icon } from 'astro-pure/user'
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>这里还有一些 高级组件，可能适合你。希望你喜欢使用这些组件！