内置组件
手动与自动导入
所有的内置组件都可以直接在 md 文件中使用,但是必须在 svelte 中手动导入
Link
Props
label
- 链接文案to
- 链接地址withBase
- 是否用sveltekit config.kit.paths.base属性作为前缀,默认为true
自动外部化图标
以 http(s)
开头的链接将会被自动识别为外部链接,会展示外部链接的图标
Markdown 中使用
* <Link to="https://github.com/" label="Github" />
* <Link to="/" label="首页" />
md
点击展开/折叠代码
Svelte 中使用
<script>
import { } from '@sveltepress/theme-default/components'
</script>
<div style="line-height: 24px;">
< to="/" label="首页" /> <br />
< to="https://github.com/" label="Github" />
</div>
svelte
点击展开/折叠代码
Tabs & TabPanel
Tab Props
activeName
- 默认选中的面板名bodyPadding
- 面板内容是否具有一个默认的padding
值,默认为:true
TabPanel Props
name
- 面板名activeIcon
- 选中时展示的图标内容,是一个 svelte 组件inactiveIcon
- 未选中时展示的图标内容,是一个 svelte 组件
Markdown 中使用
Counter.svelte
<script>
let = 0
</script>
<button on:click={() => ++}>
你点击了 {} 次
</button>
svelte
<Tabs activeName="Svelte">
<TabPanel name="Svelte">
```svelte title="Counter.svelte"
<script>
let count = 0
</script>
<button on:click={() => count++}>
你点击了 {count} 次
</button>
```
</TabPanel>
<TabPanel name="Vue">
```html title="Counter.vue"
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<button @click="count++">
你点击了 {{ count }} 次
</button>
```
</TabPanel>
</Tabs>
md
点击展开/折叠代码
Svelte 中使用
面板二内容
<script>
import { , } from '@sveltepress/theme-default/components'
</script>
< activeName="Tab2">
< name="Tab1">
<div>面板一内容</div>
</>
< name="Tab2">
<div>面板二内容</div>
</>
</>
svelte
点击展开/折叠代码
Expansion
Props
title
- 标题showIcon
- 是否展示图标,默认为:true
headerStyle
- 自定义头部行内样式bind:expanded
- 是否处于展开状态,默认为:false
Slots
default
- 需要折叠/展开的内容icon-fold
- 折叠状态下展示的图标icon-expanded
- 展开状态下展示的图标arrow
- 自定义箭头部分的内容
Markdown 中使用
点击展开/折叠面板
一些可折叠的内容
<Expansion title="点击展开/折叠面板">
<div class="text-[24px]">一些可折叠的内容</div>
</Expansion>
md
点击展开/折叠代码
Svelte 中使用
一个拥有自定义内容的折叠面板
看看左边,展开时会变色哦!
<script>
import { } from '@sveltepress/theme-default/components'
</script>
< title="一个拥有自定义内容的折叠面板">
<div class="p-4 text-[24px]">
看看左边,展开时会变色哦!
</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
点击展开/折叠代码
Icons (Iconify 图标预构建)
图标需要预构建
用到的图标需要加入 iconify 预构建配置 中
Markdown 中使用
<div style="font-size: 28px;">
<IconifyIcon collection="vscode-icons" name="file-type-svelte" />
</div>
md
点击展开/折叠代码
Svelte 中使用
<script>
import { } from '@sveltepress/theme-default/components'
</script>
<div style="font-size: 28px;">
< collection="vscode-icons" name="file-type-svelte" />
</div>
svelte
点击展开/折叠代码
Floating
Markdown 中使用
<Floating placement="top">
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
将鼠标放置在这里
</div>
<div class="bg-white dark:bg-dark b-1 b-solid b-blue rounded p-4" slot="floating-content">
漂浮内容
</div>
</Floating>
md
点击展开/折叠代码
Svelte 中使用
<script>
import { } from '@sveltepress/theme-default/components'
</script>
< placement="right">
<div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
将鼠标放置在这里
</div>
<div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4" slot="floating-content">
漂浮内容
</div>
</>
svelte
点击展开/折叠代码
Props
alwaysShow
- 是否始终展示浮动内容,默认为false
placement
- 指定浮动弹出层相对于触发内容的位置,完整取值参考:placement - floating-ui,默认为:bottom
.floatingClass
- 加到弹出层容器上的额外自定义样式类名