Back

User Components

Easily extend your content page more interactive

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

对于 ，您可以直接导入和使用组件并使用。第一部分将显示一个示例。.astro

Container

Card

import { Card } from '@/components/user'

<Card
  as='a'
  href='#card'
  heading='Lorem ipsum'
  subheading='Lorem ipsum dolor sit amet, vidit suscipit at mei.'
  date='August 2021'
>
  You can even contain a list here
</Card>
jsx

呈现:

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.

August 2021

您甚至可以在此处包含一个列表

Collapse

import { Collapse } from '@/components/user'

<Collapse title='Lorem ipsum'> Lorem ipsum dolor sit amet, vidit suscipit at mei. </Collapse>
jsx

Renders:

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.
Are you sure you want to see?

Lorem ipsum

Lorem ipsum dolor sit amet, vidit suscipit at mei.

Aside

import { Aside } from '@/components/user'

<Aside>未选择任何类型将默认为 'note'。😉</Aside>
<Aside type="tip">
此外，还支持其他内容！😍

// ```js
// A code snippet, for example.
// ```
</Aside>
<Aside type='caution' title='You should know it!'>Is your code buggy again? 🤨</Aside>
<Aside type="danger">Have you used `rm -rf` to clean your computer? 😡</Aside>
jsx

Renders:

This component also has a remark support version (which can directly use in .md), but not integrated in this theme. You can check packages/starlight/index.ts ↗ for reference code.

:::tip
This theme author is a good guy.
:::
md

Tabs

import { Tabs, TabItem } from '@/components/user';

<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>
jsx

Renders:

Sirius, Vega, Betelgeuse

List

CardList

import { CardList } from '@/components/user'

<CardList title='A list' list={
  [{title: 'I am hidden!'}]
} collapse />
<CardList title='A list' list={
  [
    { title: 'Lorem ipsum', link: '#' },
    { title: 'Dolor sit amet', children: [{
      title: 'Vidit suscipit', link: '#'
    }] }
  ]
} />
jsx

Renders:

A list

  • I am hidden!

A list

Timeline

import { Timeline } from '@/components/user'

<Timeline events={
  [
    { date: 'August 2021', content: 'Hello' },
    { date: 'August 2022', content: '<i>World!</i>' },
  ]
} />
jsx

Renders:

  • August 2021
    Hello
  • August 2022
    World!

Steps

import { Steps } from '@/components/user'

How to Yi Jian San Lian:

<Steps>
1. Dian Zan
2. Tou Bi
3. Shou Cang
</Steps>
jsx

Renders:

How to Yi Jian San Lian:

  1. Dian Zan
  2. Tou Bi
  3. Shou Cang

Simple Text Render

Button

import { Button } from '@/components/user'

<div class='flex gap-x-2'>
  <Button as='div' title='Simple' />
  <Button as='a' href='#button' title='Link style' style='ahead' class='not-prose' />
  <Button as='div' title='Back' style='back' />
  <Button as='div' title='Pill style' style='pill' />
  <Button as='div' style='pill'><i>Italic</i></Button>
</div>
jsx

Renders:

Simple

Link style

Back

Pill style

Italic

Spoiler

import { Spoiler } from '@/components/user'

<Spoiler>No one can find me.</Spoiler> But I am exposed here.
jsx

Renders:

No one can find me. But I am exposed here.

Formatted Date

import { FormattedDate } from '@/components/user'

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

Renders:

Label

import { Label } from '@/components/user'

<Label title='Hello' />
jsx

Renders:

Hello

There’s also some Advanced Components, which may suit for you. Hope you enjoy using these components!

See more docs