mirror of
https://github.com/slidevjs/slidev.git
synced 2026-09-14 20:46:32 +08:00
9337e85757
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: _Kerman <kermanx@qq.com>
1.4 KiB
1.4 KiB
relates, tags, description
| relates | tags | description | |||||
|---|---|---|---|---|---|---|---|
|
|
A syntax sugar for named slots in layouts. |
Slot Sugar for Layouts
Some layouts can provide multiple contributing points using Vue's named slots.
For example, in two-cols layout, you can have two columns left (default slot) and right (right slot) side by side.
---
layout: two-cols
---
<template v-slot:default>
# Left
This is shown on the left
</template>
<template v-slot:right>
# Right
This is shown on the right
</template>
Left
This shows on the left
Right
This shows on the right
We also provide a shorthand syntactical sugar ::name:: for slot name. The following works exactly the same as the previous example.
---
layout: two-cols
---
# Left
This is shown on the left
::right::
# Right
This is shown on the right
You can also explicitly specify the default slot and provide it in the custom order.
---
layout: two-cols
---
::right::
# Right
This shows on the right
::default::
# Left
This is shown on the left