core-components.md - slidev

core-components.md

1	---
2	name: components
3	description: Ready-to-use components in Slidev
4	---
5
6	# Built-in Components
7
8	Ready-to-use components in Slidev.
9
10	## Navigation
11
12	### Link
13
14	Navigate to slide:
15	```md
16	<Link to="5">Go to slide 5</Link>
17	<Link to="intro">Go to intro</Link> <!-- with routeAlias -->
18	```
19
20	### SlideCurrentNo / SlidesTotal
21
22	```md
23	Slide <SlideCurrentNo /> of <SlidesTotal />
24	```
25
26	### Toc (Table of Contents)
27
28	```md
29	<Toc />
30	<Toc maxDepth="2" />
31	<Toc columns="2" />
32	```
33
34	Props:
35	- `columns` - Number of columns
36	- `maxDepth` / `minDepth` - Heading depth filter
37	- `mode` - 'all' \| 'onlyCurrentTree' \| 'onlySiblings'
38
39	### TitleRenderer
40
41	Render slide title:
42	```md
43	<TitleRenderer no="3" />
44	```
45
46	## Animations
47
48	### VClick / VClicks
49
50	```md
51	<VClick>Shows on click</VClick>
52
53	<VClicks>
54
55	- Item 1
56	- Item 2
57
58	</VClicks>
59	```
60
61	### VAfter
62
63	```md
64	<VClick>First</VClick>
65	<VAfter>Shows with first</VAfter>
66	```
67
68	### VSwitch
69
70	```md
71	<VSwitch>
72	<template #1>State 1</template>
73	<template #2>State 2</template>
74	</VSwitch>
75	```
76
77	## Drawing
78
79	### Arrow
80
81	```md
82	<Arrow x1="10" y1="10" x2="100" y2="100" />
83	<Arrow x1="10" y1="10" x2="100" y2="100" two-way />
84	```
85
86	Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`
87
88	### VDragArrow
89
90	Draggable arrow:
91	```md
92	<VDragArrow />
93	```
94
95	## Layout
96
97	### Transform
98
99	Scale elements:
100	```md
101	<Transform :scale="0.5">
102	<LargeContent />
103	</Transform>
104	```
105
106	Props: `scale`, `origin`
107
108	### AutoFitText
109
110	Auto-sizing text:
111	```md
112	<AutoFitText :max="200" :min="50" modelValue="Hello" />
113	```
114
115	## Media
116
117	### SlidevVideo
118
119	```md
120	<SlidevVideo v-click autoplay controls>
121	<source src="/video.mp4" type="video/mp4" />
122	</SlidevVideo>
123	```
124
125	Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`
126
127	### Youtube
128
129	```md
130	<Youtube id="dQw4w9WgXcQ" />
131	<Youtube id="dQw4w9WgXcQ" width="600" height="400" />
132	```
133
134	### Tweet
135
136	```md
137	<Tweet id="1423789844234231808" />
138	<Tweet id="1423789844234231808" :scale="0.8" />
139	```
140
141	## Conditional
142
143	### LightOrDark
144
145	```md
146	<LightOrDark>
147	<template #dark>Dark mode content</template>
148	<template #light>Light mode content</template>
149	</LightOrDark>
150	```
151
152	### RenderWhen
153
154	```md
155	<RenderWhen context="presenter">
156	Only in presenter mode
157	</RenderWhen>
158	```
159
160	Context values:
161	- `main` - Main presentation view
162	- `visible` - Visible slides
163	- `print` - Print/export mode
164	- `slide` - Normal slide view
165	- `overview` - Overview mode
166	- `presenter` - Presenter mode
167	- `previewNext` - Next slide preview
168
169	## Branding
170
171	### PoweredBySlidev
172
173	```md
174	<PoweredBySlidev />
175	```
176
177	## Draggable
178
179	### VDrag
180
181	```md
182	<VDrag pos="myElement">
183	Draggable content
184	</VDrag>
185	```
186
187	See [draggable](draggable.md) for details.
188
189	## Component Auto-Import
190
191	Components from these sources are auto-imported:
192	1. Built-in components
193	2. Theme components
194	3. Addon components
195	4. `./components/` directory
196
197	No import statements needed.
198

198 lines MARKDOWN