User Components

1
import { Collapse } from 'astro-pure/user'
2

3
<Collapse title='Lorem ipsum'> Lorem ipsum dolor sit amet, vidit suscipit at mei. </Collapse>
4
<Collapse title='Lorem ipsum'>
5
  <div slot='before' class='mt-2'>Are you sure you want to see?</div>
6
  <div>Lorem ipsum dolor sit amet, vidit suscipit at mei.</div>
7
</Collapse>

1
import { Aside } from 'astro-pure/user'
2

3
<Aside>No type selected will default to 'note'. 😉</Aside>
4
<Aside type="tip">
5
Other content is also supported in aside! 😍
6

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

1
import { Tabs, TabItem } from 'astro-pure/user';
2

3
<Tabs>
4
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
5
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
6
</Tabs>

1
import { MdxRepl } from 'astro-pure/user'
2

3
// Width is optional; using width parameter to set
4
// all elements inside the MDX Repl component.
5
// (slot desc is not included this parameter)
6
<MdxRepl width='100%'>
7
<p>Hello</p>
8
<Fragment slot='desc'>
9
  ```html
10
  <p>Hello</p>
11
  ```
12
</Fragment>
13
</MdxRepl>

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

3
<CardList title='A list' list={
4
  [{title: 'I am hidden!'}]
5
} collapse />
6
<CardList title='A list' list={
7
  [
8
    { title: 'Lorem ipsum', link: '#list' },
9
    { title: 'Dolor sit amet', children: [{
10
      title: 'Vidit suscipit', link: '#'
11
    }] }
12
  ]
13
} />

1
import { Timeline } from 'astro-pure/user'
2

3
<Timeline events={
4
  [
5
    { date: 'August 2021', content: 'Hello' },
6
    { date: 'August 2022', content: '<i>World!</i>' },
7
  ]
8
} />

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

3
How to Yi Jian San Lian:
4

5
<Steps>
6
1. Dian Zan
7
2. Tou Bi
8
3. Shou Cang
9

10
  Or GuanZhu sometimes.
11
</Steps>

1
import { Button } from 'astro-pure/user'
2

3
<div class='flex gap-x-2'>
4
  <Button as='div' title='Simple' />
5
  <Button as='a' href='#button' title='Link style' style='ahead' class='not-prose' />
6
  <Button as='div' title='Back' style='back' />
7
  <Button as='div' title='Pill style' style='pill' />
8
  <Button as='div' style='pill'><i>Italic</i></Button>
9
</div>

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

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

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

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

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

3
<Label title='Hello' />

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

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

1
import { Icon } from 'astro-pure/user'
2

3
Single use: <Icon name='rss' class='inline' />
4

5
Preview all icons available (click button to copy):
6

7
import { Icons as allIcons } from 'astro-pure/libs'
8
import { Button } from 'astro-pure/user'
9

10
<div class='flex flex-wrap gap-2'>
11
{
12
  Object.keys(allIcons).map(icon => {
13
    const script = `navigator.clipboard.writeText('${icon}');document.dispatchEvent(new CustomEvent('toast',{detail:{message:'Copied "${icon}" to clipboard!'}}))`
14
    return (
15
      <Button as='button' type='button' class='cursor-pointer' onclick={script}>
16
        <Icon slot='before' name={icon} />
17
        <span>{icon}</span>
18
      </Button>
19
    )
20
  })
21
}
22
</div>