slot-sugar.md - slidev

slot-sugar.md

1	---
2	relates:
3	- Vue's Named Slots: https://v3.vuejs.org/guide/component-slots.html
4	tags: [layout, syntax]
5	description: \|
6	A syntax sugar for named slots in layouts.
7	---
8
9	# Slot Sugar for Layouts
10
11	Some layouts can provide multiple contributing points using [Vue's named slots](https://vuejs.org/guide/components/slots.html).
12
13	For example, in [`two-cols` layout](https://github.com/slidevjs/slidev/blob/main/packages/client/layouts/two-cols.vue), you can have two columns left (`default` slot) and right (`right` slot) side by side.
14
15	```md
16	---
17	layout: two-cols
18	---
19
20	<template v-slot:default>
21
22	# Left
23
24	This is shown on the left
25
26	</template>
27	<template v-slot:right>
28
29	# Right
30
31	This is shown on the right
32
33	</template>
34	```
35
36	<div class="grid grid-cols-2 rounded border border-gray-400 border-opacity-50 px-10 pb-4">
37	<div>
38	<h3>Left</h3>
39	<p>This shows on the left</p>
40	</div>
41	<div>
42	<h3>Right</h3>
43	<p>This shows on the right</p>
44	</div>
45	</div>
46
47	We also provide a shorthand syntactical sugar `::name::` for slot name. The following works exactly the same as the previous example.
48
49	```md
50	---
51	layout: two-cols
52	---
53
54	# Left
55
56	This is shown on the left
57
58	::right::
59
60	# Right
61
62	This is shown on the right
63	```
64
65	You can also explicitly specify the default slot and provide it in the custom order.
66
67	```md
68	---
69	layout: two-cols
70	---
71
72	::right::
73
74	# Right
75
76	This shows on the right
77
78	::default::
79
80	# Left
81
82	This is shown on the left
83	```
84

84 lines MARKDOWN