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
label
- The link label textto
- The link addresswithBase
- Determine whether to withsveltekit config.kit.paths.base. Default istrue
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" />
md
Click fold/expand code
In svelte
<script>
import { } from '@sveltepress/theme-default/components'
</script>
<div style="line-height: 24px;">
< to="/" label="Home page" /> <br />
< 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 istrue
TabPanel Props
name
- The panel name.activeIcon
- The icon component used when tab is activeinactiveIcon
- The icon component used when tab is inactive
In Markdown
Counter.svelte
<script>
let = 0
</script>
<button on:click={() => ++}>
You've clicked {} 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>
md
Click fold/expand code
In svelte
Tab2 content
<script>
import { , } from '@sveltepress/theme-default/components'
</script>
< activeName="Tab2">
< name="Tab1">
<div>Tab1 content</div>
</>
< name="Tab2">
<div>Tab2 content</div>
</>
</>
svelte
Click fold/expand code
Expansion
Props
title
- The expansion titleshowIcon
- Determine whether to the icon or not. Default istrue
headerStyle
- Customize the header inline stylebind:expanded
- Determine the expanded status. Default isfalse
Slots
default
- The expansion contenticon-fold
- The icon used for foldedicon-expanded
- The icon used for expandedarrow
- 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>
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 { } from '@sveltepress/theme-default/components'
</script>
< 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>
</>
svelte
Click fold/expand code
Icons (Pre-build iconify icons)
Icon pre-build required
The iconify icons should be in the Pre-build iconify icons config
In markdown
<div style="font-size: 28px;">
<IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
md
Click fold/expand code
In svelte
<script>
import { } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
< collection="vscode-icons" name="file-type-svelte" />
</div>
svelte
Click fold/expand code
Floating
In markdown
<Floating placement="top">
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
Trigger
</div>
<div class="bg-white dark:bg-dark b-1 b-solid b-blue rounded p-4" slot="floating-content">
Floating content
</div>
</Floating>
md
Click fold/expand code
In svelte
<script>
import from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
< placement="right">
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
Trigger
</div>
="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4" slot="floating-content">
Floating content
</div>
</>
svelte
Click fold/expand code
Props
alwaysShow
- Determine whether to always show the floating content. Default isfalse
placement
- Determine the floating content position. Seeplacement - floating-ui. Default isbottom
.floatingClass
- The addition classes that will be added to the floating content container.