Astro Theme Pure

Back

用户组件

轻松扩展您的内容页面，使其更具交互性

组件让您可以轻松且一致地重用一部分 UI 或样式。您不仅可以在 .astro 文件中使用它们，也可以在 .mdx 文件中使用。

对于 .astro 文件，您可以直接导入并使用组件。第一节中将展示一个示例。

容器 (Containers)#

卡片 (Card)#

标题示例

这是一个卡片副标题，用于描述卡片内容。

2021年8月

您甚至可以在这里包含一个列表

 
import { Card } from 'astro-pure/user'

<Card
  as='a'
  href='#card'
  heading='标题示例'
  subheading='这是一个卡片副标题，用于描述卡片内容。'
  date='2021年8月'
>
  您甚至可以在这里包含一个列表
</Card>
jsx

折叠框 (Collapse)#

点击展开

这是一个折叠框的内容示例。
您确定要查看吗？

带前置内容的折叠框

这是折叠后的详细内容。
 
import { Collapse } from 'astro-pure/user'

<Collapse title='点击展开'> 这是一个折叠框的内容示例。 </Collapse>
<Collapse title='带前置内容的折叠框'>
  <div slot='before' class='mt-2'>您确定要查看吗？</div>
  <div>这是折叠后的详细内容。</div>
</Collapse>
jsx

侧边栏提示 (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>
jsx

该组件还有一个 remark 插件支持版本（可以直接在 .md 中使用），但尚未集成到本主题中。您可以参考 packages/starlight/integrations/asides.ts ↗ 获取参考代码。

:::tip
本主题的作者是个好人。
:::
md

选项卡 (Tabs)#

天狼星, 织女星, 参宿四 
import { Tabs, TabItem } from 'astro-pure/user';

<Tabs>
  <TabItem label="恒星">天狼星, 织女星, 参宿四</TabItem>
  <TabItem label="卫星">木卫一, 木卫二, 木卫三</TabItem>
</Tabs>
jsx

MDX Repl#

你好

<p>你好</p>
html
import { MdxRepl } from 'astro-pure/user'

// Width 是可选的；使用 width 参数来设置
// MDX Repl 组件内的所有元素。
// (slot desc 不包含此参数)
<MdxRepl width='100%'>
<p>你好</p>
<Fragment slot='desc'>
  ```html
  <p>你好</p>
  ```
</Fragment>
</MdxRepl>
jsx

您可以将任何其他组件组合到 desc 插槽中。<Fragment> 不会被渲染为父级 HTML 容器标签。

列表 (List)#

卡片列表 (CardList)#

折叠列表示例

  • 我被隐藏了！

普通列表示例

import { CardList } from 'astro-pure/user'

<CardList title='折叠列表示例' list={
  [{title: '我被隐藏了！'}]
} collapse />
<CardList title='普通列表示例' list={
  [
    { title: '项目一', link: '#list' },
    { title: '项目二', children: [{
      title: '子项目', link: '#'
    }] }
  ]
} />
jsx

时间线 (Timeline)#

  • 2021年8月
    你好
  • 2022年8月
    世界！ 
import { Timeline } from 'astro-pure/user'

<Timeline events={
  [
    { date: '2021年8月', content: '你好' },
    { date: '2022年8月', content: '<i>世界！</i>' },
  ]
} />
jsx

步骤条 (Steps)#

如何一键三连：

  1. 点赞

  2. 投币

  3. 收藏

    有时也可以点个关注。

import { Steps } from 'astro-pure/user'

如何一键三连：

<Steps>
1. 点赞
2. 投币
3. 收藏
  
   有时也可以点个关注。
</Steps>
jsx

简单文本渲染 (Simple Text Render)#

按钮 (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>
jsx

剧透 (Spoiler)#

没有人能找到我。 但我就暴露在这里。

import { Spoiler } from 'astro-pure/user'

<Spoiler>没有人能找到我。</Spoiler> 但我就暴露在这里。
jsx

格式化日期 (Formatted Date)#

import { FormattedDate } from 'astro-pure/user'

<FormattedDate date={new Date('2077-01-01')} dateTimeOptions={{ month: 'short' }} />
jsx

标签 (Label)#

你好

import { Label } from 'astro-pure/user'

<Label title='你好' />
jsx

SVG 加载器 (SVG Loader)#

import { Svg } from 'astro-pure/user'

<Svg src={import('@/assets/icons/key.svg?raw')} />
jsx

资源 (Resources)#

图标 (Icon)#

单次使用：

预览所有可用图标（点击按钮复制名称）：

还有一些 高级组件，可能适合您。希望您喜欢使用这些组件！

Edit on GitHub

DOCS