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

<script>
  import { Link  } from '@sveltepress/theme-default/components' 
</script>
<div style="line-height: 24px;">
  <Lin k  to = " /" label="Home page" /> <br />
  <Lin k  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  = $ state (0)
</script>
<button onclick={() => count ++}>
  You've clicked {count } times
</button>
svelte
<Tabs activeName="Svelte">
  <TabPanel name="Svelte">

```svelte title="Counter.svelte"
<script>
  let count = $state(0)
</script>
<button onclick={() => 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>
<Tab s  act i veName=" Tab2 " > 
  <TabPane l  nam e =" Tab1 " > 
    <div>Tab1 content</div>
  </TabPanel >
  <TabPane l  nam e =" 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>
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>
<Expansio n  tit l e=" A expan sion without custom icon and arrow">
  <div class="p-4 text-[24px]">
    Look at the icon left. It gets colored when expanded!
  </div>
  {#snippet iconFold ()}
    <div class="i-bxs-wink-smile"></div>
  {/snippet}
  {#snippet iconExpanded ()}
    <div class="i-fxemoji-smiletongue"></div>
  {/snippet}
  {#snippet arrow ()}
    <div class="i-material-symbols-thumbs-up-down"></div>
  {/ sni ppe t } 
</Expansion >
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 class="text-8 p-4">
  <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;">
  <IconifyIco n  col l ection="vscode-icons" name="file-type-svelte" />
</div>
svelte
Click fold/expand code

Floating

In markdown

Trigger
<Floating placement="top">
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    Trigger
  </div>
  {#snippet floatingContent()}
    <div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      Floating content
    </div>
  {/snippet}
</Floating>
md
Click fold/expand code

In svelte

Trigger
<script>
  import Floating  from '@sveltepress/twoslash/FloatingWrapper.svelte'
</script>
<Floatin g  pla c ement=" right " > 
  <div class="text-xl b-1 b-solid b-blue rounded py-10 px-4">
    Trigger
  </div>

  {#snippet floatingContent ()}
    <div class="bg-white dark:bg-dark b-solid b-1 b-red rounded p-4">
      Floating content
    </div>
  {/ snippet } 
</Fl oating >
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.

CodeBlock

In markdown

const foo = 'bar'
<CodeBlock lang="ts" code="const foo = 'bar'" />
md
Click fold/expand code

In markdown

const foo = 'bar'
<script>
  import { CodeBlock  } from '@sveltepress/theme-default/components'
</script>
<CodeBloc k  lan g ="ts" code="const foo = 'bar'" />
svelte
Click fold/expand code

Props

  • lang - The language name. 'svelte', 'md', 'js', ...etc
  • code - The code content
Suggest changes to this page
Last update at: 2025/02/24 01:50:09
Previous
Home page
Next
Headings & Anchors