Skip to content

Commit 0daa359

Browse files
authored
feat: add doc for Titles and Link components (#64)
1 parent 7308799 commit 0daa359

File tree

1 file changed

+51
-12
lines changed

1 file changed

+51
-12
lines changed

builtin/components.md

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,21 @@
44

55
> The documentations of this section is still working in progress. Before that, you can take a look at the [source code](https://github.com/slidevjs/slidev/blob/main/packages/client/builtin) directly.
66
7-
### `TOC`
7+
### `Toc`
88

99
Insert a Table Of Content.
1010

11-
Titles and title levels get automatically retrieved from the first title element of each slides.
12-
13-
You can override this automatic behaviour for a slide by using the front matter syntax:
14-
```yml
15-
---
16-
title: Amazing slide title
17-
level: 2
18-
---
19-
```
20-
21-
Or if you prefer the slide to not appear in the TOC at all, you can use:
11+
If you want a slide to not appear in the `<Toc>` component, you can use in the front matter block of the slide:
2212
```yml
2313
---
2414
hideInToc: true
2515
---
2616
```
2717

18+
Titles are displayed using the [`<Titles>` component](#titles)
19+
2820
#### Usage
21+
2922
~~~md
3023
<Toc />
3124
~~~
@@ -41,6 +34,52 @@ Parameters:
4134
* `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item)
4235
* `'onlySiblings'`: Display only items that are in current tree and their direct siblings
4336

37+
### `Link`
38+
39+
Insert a link you can use to navigate to a given slide.
40+
41+
#### Usage
42+
43+
~~~md
44+
<Link to="42">Go to slide 42</Link>
45+
<Link to="42" title="Go to slide 42"/>
46+
~~~
47+
48+
Parameters:
49+
50+
* `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`)
51+
* `title` (`string`): The title to display
52+
53+
### `Titles`
54+
55+
Insert the main title from a slide parsed as HTML.
56+
57+
Titles and title levels get automatically retrieved from the first title element of each slides.
58+
59+
You can override this automatic behaviour for a slide by using the front matter syntax:
60+
```yml
61+
---
62+
title: Amazing slide title
63+
level: 2
64+
---
65+
```
66+
67+
#### Usage
68+
69+
The `<Titles>` component is a virtual component you can import with:
70+
```js
71+
import Titles from '/@slidev/titles.md'
72+
```
73+
74+
Then you can use it with:
75+
~~~md
76+
<Titles no="42" />
77+
~~~
78+
79+
Parameters:
80+
81+
* `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`)
82+
4483
## Custom Components
4584

4685
Create a directory `components/` under your project root, and simply put your custom Vue components under it, then you can use it with the same name in your markdown file!

0 commit comments

Comments
 (0)