Setting the file. One moment.
Subchapter 7.18
references/core-components.mdMarkdown3 KBView on GitHub
Navigate to slide:
<Link to="5">Go to slide 5</Link>
<Link to="intro">Go to intro</Link> <!-- with routeAlias -->Slide <SlideCurrentNo /> of <SlidesTotal /><Toc />
<Toc maxDepth="2" />
<Toc columns="2" />Props:
columns - Number of columnsmaxDepth / minDepth - Heading depth filtermode - ‘all’ | ‘onlyCurrentTree’ | ‘onlySiblings’Render slide title:
<TitleRenderer no="3" /><VClick>Shows on click</VClick>
<VClicks>
- Item 1
- Item 2
</VClicks><VClick>First</VClick>
<VAfter>Shows with first</VAfter><VSwitch>
<template #1>State 1</template>
<template #2>State 2</template>
</VSwitch><Arrow x1="10" y1="10" x2="100" y2="100" />
<Arrow x1="10" y1="10" x2="100" y2="100" two-way />Props: x1, y1, x2, y2, width, color, two-way
Draggable arrow:
<VDragArrow />Scale elements:
<Transform :scale="0.5">
<LargeContent />
</Transform>Props: scale, origin
Auto-sizing text:
<AutoFitText :max="200" :min="50" modelValue="Hello" /><SlidevVideo v-click autoplay controls>
<source src="/video.mp4" type="video/mp4" />
</SlidevVideo>Props: controls, autoplay, autoreset, poster, timestamp
<Youtube id="dQw4w9WgXcQ" />
<Youtube id="dQw4w9WgXcQ" width="600" height="400" /><Tweet id="1423789844234231808" />
<Tweet id="1423789844234231808" :scale="0.8" /><LightOrDark>
<template #dark>Dark mode content</template>
<template #light>Light mode content</template>
</LightOrDark><RenderWhen context="presenter">
Only in presenter mode
</RenderWhen>Context values:
main - Main presentation viewvisible - Visible slidesprint - Print/export modeslide - Normal slide viewoverview - Overview modepresenter - Presenter modepreviewNext - Next slide preview<PoweredBySlidev /><VDrag pos="myElement">
Draggable content
</VDrag>See draggable (opens in a new tab) for details.
Components from these sources are auto-imported:
./components/ directoryNo import statements needed.