Built-in Components

Manually import

All built-in Components can directly use in markdown files.
But should be imported manually in svelte files.

Links

Props

Auto external icon

Would auto add a external icon when link address starts with http or https

In markdown

* <Link to="https://github.com/" label="Github" />  
* <Link to="/" label="Home page" />
* <Link to="https://github.com/" label="Github" />  
* <Link to="/" label="Home page" />
md
Click fold/expand code

In svelte

<script>
  import { Link } from '@sveltepress/theme-default/components' 
</script>
<div style="line-height: 24px;">
  <Link to="/" label="Home page" /> <br />
  <Link to="https://github.com/" label="Github" />
</div>
<script>
  import { Link } from '@sveltepress/theme-default/components' 
</script>
<div style="line-height: 24px;">
  <Link to="/" label="Home page" /> <br />
  <Link to="https://github.com/" label="Github" />
</div>
svelte
Click fold/expand code

Tabs & TabPanel

Tab Props

  • activeName - The default active panel name.
  • bodyPadding - Determine whether the panel body has a padding or not. Default is true

TabPanel Props

  • name - The panel name.
  • activeIcon - The icon component used when tab is active
  • inactiveIcon - The icon component used when tab is inactive

In Markdown

Counter.svelte
<script>
  let count = 0
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
<script>
  let count = 0
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
svelte
<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = 0
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
```

  </TabPanel>

  <TabPanel name="Vue">

```html  title="Counter.vue"
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>
```

  </TabPanel>
</Tabs>
<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = 0
</script>
<button on:click={() => count++}>
  You've clicked {count} times
</button>
```

  </TabPanel>

  <TabPanel name="Vue">

```html  title="Counter.vue"
<script setup>
  import { ref } from 'vue'

  const count = ref(0)
</script>
<button @click="count++">
  You've clicked {count} times
</button>
```

  </TabPanel>
</Tabs>
md
Click fold/expand code

In svelte

Tab2 content
<script>
  import { TabPanel, Tabs } from '@sveltepress/theme-default/components' 
</script>
<Tabs activeName="Tab2">
  <TabPanel name="Tab1">
    <div>Tab1 content</div>
  </TabPanel>
  <TabPanel name="Tab2">
    <div>Tab2 content</div>
  </TabPanel>
</Tabs>
<script>
  import { TabPanel, Tabs } from '@sveltepress/theme-default/components' 
</script>
<Tabs activeName="Tab2">
  <TabPanel name="Tab1">
    <div>Tab1 content</div>
  </TabPanel>
  <TabPanel name="Tab2">
    <div>Tab2 content</div>
  </TabPanel>
</Tabs>
svelte
Click fold/expand code

Expansion

Props

  • title - The expansion title
  • showIcon - Determine whether to the icon or not. Default is true
  • headerStyle - Customize the header inline style
  • bind:expanded - Determine the expanded status. Default is false

Slots

  • default - The expansion content
  • icon-fold - The icon used for folded
  • icon-expanded - The icon used for expanded
  • arrow - Customize the expansion arrow indicator

In markdown

Click to expand/fold panel
Some content
<Expansion title="Click to expand/fold panel">
  <div class="text-[24px]">Some content</div>
</Expansion>
<Expansion title="Click to expand/fold panel">
  <div class="text-[24px]">Some content</div>
</Expansion>
md
Click fold/expand code

In svelte

A expansion without custom icon and arrow
Look at the icon left. It gets colored when expanded!
<script>
  import { Expansion } from '@sveltepress/theme-default/components'
</script>
<Expansion title="A expansion without custom icon and arrow">
  <div class="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  <div slot="icon-fold" class="i-bxs-wink-smile"></div>
  <div slot="icon-expanded" class="i-fxemoji-smiletongue"></div>
  <div slot="arrow" class="i-material-symbols-thumbs-up-down"></div>
</Expansion>
<script>
  import { Expansion } from '@sveltepress/theme-default/components'
</script>
<Expansion title="A expansion without custom icon and arrow">
  <div class="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  <div slot="icon-fold" class="i-bxs-wink-smile"></div>
  <div slot="icon-expanded" class="i-fxemoji-smiletongue"></div>
  <div slot="arrow" class="i-material-symbols-thumbs-up-down"></div>
</Expansion>
svelte
Click fold/expand code

Icons (Pre-build iconify icons)

Icon pre-build required

The iconify icons should be in the

In markdown

<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
md
Click fold/expand code

In svelte

<script>
  import { IconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
<script>
  import { IconifyIcon } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
  <IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
svelte
Click fold/expand code
Suggest changes to this page
Last update at: 2023/08/10 20:32:21