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" />
md
Click fold/expand code

In svelte

<>
  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 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
<>
  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
<>
  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 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>
md
Click fold/expand code

In svelte

A expansion without custom icon and arrow
Look at the icon left. It gets colored when expanded!
<>
  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

In markdown

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

In svelte

<>
  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

<>
  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>

  <div class="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 is false
  • placement - Determine the floating content position. See
    placement - floating-ui
    . Default is bottom.
  • floatingClass - The addition classes that will be added to the floating content container.
Suggest changes to this page
Last update at: 2024/03/04 01:19:21