core-layouts.md - slidev

core-layouts.md

1	---
2	name: layouts
3	description: Available layouts for slides
4	---
5
6	# Built-in Layouts
7
8	Available layouts for slides.
9
10	## Basic Layouts
11
12	### default
13
14	Standard slide layout.
15	```yaml
16	---
17	layout: default
18	---
19	```
20
21	### center
22
23	Content centered horizontally and vertically.
24	```yaml
25	---
26	layout: center
27	---
28	```
29
30	### cover
31
32	Title/cover slide with centered content.
33	```yaml
34	---
35	layout: cover
36	---
37	```
38
39	### end
40
41	End slide.
42	```yaml
43	---
44	layout: end
45	---
46	```
47
48	### full
49
50	Full-screen content, no padding.
51	```yaml
52	---
53	layout: full
54	---
55	```
56
57	### none
58
59	No layout styling.
60	```yaml
61	---
62	layout: none
63	---
64	```
65
66	## Text Layouts
67
68	### intro
69
70	Introduction slide.
71	```yaml
72	---
73	layout: intro
74	---
75	```
76
77	### quote
78
79	Large quotation display.
80	```yaml
81	---
82	layout: quote
83	---
84	```
85
86	### section
87
88	Section divider.
89	```yaml
90	---
91	layout: section
92	---
93	```
94
95	### statement
96
97	Statement/affirmation display.
98	```yaml
99	---
100	layout: statement
101	---
102	```
103
104	### fact
105
106	Fact/data display.
107	```yaml
108	---
109	layout: fact
110	---
111	```
112
113	## Multi-Column Layouts
114
115	### two-cols
116
117	Two columns side by side:
118	```md
119	---
120	layout: two-cols
121	---
122
123	# Left Column
124
125	Left content
126
127	::right::
128
129	# Right Column
130
131	Right content
132	```
133
134	### two-cols-header
135
136	Header with two columns below:
137	```md
138	---
139	layout: two-cols-header
140	---
141
142	# Header
143
144	::left::
145
146	Left content
147
148	::right::
149
150	Right content
151	```
152
153	## Image Layouts
154
155	### image
156
157	Full-screen image:
158	```yaml
159	---
160	layout: image
161	image: /photo.jpg
162	backgroundSize: cover
163	---
164	```
165
166	### image-left
167
168	Image on left, content on right:
169	```yaml
170	---
171	layout: image-left
172	image: /photo.jpg
173	class: my-class
174	---
175
176	# Content on Right
177	```
178
179	### image-right
180
181	Image on right, content on left:
182	```yaml
183	---
184	layout: image-right
185	image: /photo.jpg
186	---
187
188	# Content on Left
189	```
190
191	Props: `image`, `class`, `backgroundSize`
192
193	## Iframe Layouts
194
195	### iframe
196
197	Full-screen iframe:
198	```yaml
199	---
200	layout: iframe
201	url: https://example.com
202	---
203	```
204
205	### iframe-left
206
207	Iframe on left, content on right:
208	```yaml
209	---
210	layout: iframe-left
211	url: https://example.com
212	---
213
214	# Content
215	```
216
217	### iframe-right
218
219	Iframe on right, content on left:
220	```yaml
221	---
222	layout: iframe-right
223	url: https://example.com
224	---
225
226	# Content
227	```
228
229	## Layout Loading Order
230
231	1. Slidev default layouts
232	2. Theme layouts
233	3. Addon layouts
234	4. Custom layouts (`./layouts/`)
235
236	Later sources override earlier ones.
237
238	## Custom Layouts
239
240	Create `layouts/my-layout.vue`:
241
242	```vue
243	<template>
244	<div class="slidev-layout my-layout">
245	<slot />
246	</div>
247	</template>
248
249	<style scoped>
250	.my-layout {
251	display: flex;
252	align-items: center;
253	justify-content: center;
254	}
255	</style>
256	```
257
258	With named slots:
259
260	```vue
261	<template>
262	<div class="slidev-layout two-areas">
263	<div class="top">
264	<slot name="top" />
265	</div>
266	<div class="bottom">
267	<slot />
268	</div>
269	</div>
270	</template>
271	```
272
273	Usage:
274	```md
275	---
276	layout: two-areas
277	---
278
279	::top::
280
281	Top content
282
283	::default::
284
285	Bottom content
286	```
287

287 lines MARKDOWN