diff --git a/.vitepress/config.js b/.vitepress/config.js index 1f46141735..5763eb9eda 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -182,6 +182,17 @@ const Customizations = [ } ] +const BuiltIn = [ + { + text: 'Components', + link: '/builtin/components', + }, + { + text: 'Layouts', + link: '/builtin/layouts', + }, +] + const Resources = [ { text: 'Showcases', @@ -216,16 +227,7 @@ const slidebars = [ }, { text: 'Built-in', - children: [ - { - text: 'Components', - link: '/builtin/components', - }, - { - text: 'Layouts', - link: '/builtin/layouts', - }, - ], + children: BuiltIn, }, ] @@ -282,6 +284,10 @@ module.exports = { text: 'Customize', items: Customizations, }, + { + text: 'Built-in', + items: BuiltIn, + }, { text: 'Resources', items: Resources, diff --git a/builtin/components.md b/builtin/components.md index 092ca7aae8..871db85680 100644 --- a/builtin/components.md +++ b/builtin/components.md @@ -2,37 +2,90 @@ ## Built-in Components -> 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. +### `Arrow` -### `Toc` +Draw an arrow. -Insert a Table Of Content. +#### Usage -If you want a slide to not appear in the `` component, you can use in the front matter block of the slide: -```yml ---- -hideInToc: true ---- -``` +~~~md + +~~~ -Titles are displayed using the [`` component](#titles) +Or: + +~~~md + +~~~ + +Parameters: + +* `x1` (`string | number`, required): start point x position +* `y1` (`string | number`, required): start point y position +* `x2` (`string | number`, required): end point x position +* `y2` (`string | number`, required): end point x position +* `width` (`string | number`, default: `2`): line width +* `color` (`string`, default: `'currentColor'`): line color + +### `AutoFitText` + +> Experimental + +Box inside which the font size will automatically adapt to fit the content. Similar to PowerPoint or Keynote TextBox. #### Usage ~~~md - + ~~~ Parameters: -* `columns` (`string | number`, default: `1`): The number of columns of the display -* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list -* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display -* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display -* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): - * `'all'`: Display all items - * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) - * `'onlySiblings'`: Display only items that are in current tree and their direct siblings +* `max` (`string | number`, default `100`): Maximum font size +* `min` (`string | number`, default `30`): Minimum font size +* `modelValue` (`string`, default `''`): text content + +### `LightOrDark` + +Use it to display one thing or another depending on the active light or dark theme. + +#### Usage + +Use it with the two named Slots `#dark` and `#light`: +~~~md + + + + +~~~ + +Provided props on `LightOrDark` component will be available using scoped slot props: +~~~md + + + + +~~~ + +You can provide markdown in the slots, but you will need to surround the content with blank lines: +~~~md + + + + +~~~ ### `Link` @@ -50,6 +103,42 @@ Parameters: * `to` (`string | number`): The path of the slide to navigate to (slides starts from `1`) * `title` (`string`): The title to display +### `RenderWhen` + +Render slot only when the context match (for example when we are in presenter view). + +#### Usage + +~~~md +This will only be rendered in presenter view. +~~~ + +Context type: `'main' | 'slide' | 'overview' | 'presenter' | 'previewNext'` + +Parameters: + +* `context` (`Context | Context[]`): context or array of contexts you want the slot to be rendered + +### `SlideCurrentNo` + +Current slide number. + +#### Usage + +~~~md + +~~~ + +### `SlidesTotal` + +Total number of slides. + +#### Usage + +~~~md + +~~~ + ### `Titles` Insert the main title from a slide parsed as HTML. @@ -80,48 +169,87 @@ Parameters: * `no` (`string | number`): The number of the slide to display the title from (slides starts from `1`) -### `LightOrDark` +### `Toc` -Use it to display one thing or another depending on the active light or dark theme. +Insert a Table Of Content. + +If you want a slide to not appear in the `` component, you can use in the front matter block of the slide: +```yml +--- +hideInToc: true +--- +``` + +Titles are displayed using the [`` component](#titles) #### Usage -Use it with the two named Slots `#dark` and `#light`: ~~~md - - - - + ~~~ -Provided props on `LightOrDark` component will be available using scoped slot props: +Parameters: + +* `columns` (`string | number`, default: `1`): The number of columns of the display +* `listClass` (`string | string[]`, default: `''`): Classes to apply to the table of contents list +* `maxDepth` (`string | number`, default: `Infinity`): The maximum depth level of title to display +* `minDepth` (`string | number`, default: `1`): The minimum depth level of title to display +* `mode` (`'all' | 'onlyCurrentTree'| 'onlySiblings'`, default: `'all'`): + * `'all'`: Display all items + * `'onlyCurrentTree'`: Display only items that are in current tree (active item, parents and children of active item) + * `'onlySiblings'`: Display only items that are in current tree and their direct siblings + +### `Transform` + +Apply scaling or transforming to elements. + +#### Usage + ~~~md - - - - + + + ~~~ -You can provide markdown in the slots, but you will need to surround the content with blank lines: +Parameters: + +* `scale` (`number | string`, default `1`): transform scale value +* `origin` (`string`, default `'top left'`): transform origin value + +### `Tweet` + +Embed a tweet. + +#### Usage + ~~~md - - - - +* `id` (`number | string`, required): id of the tweet +* `scale` (`number | string`, default `1`): transform scale value +* `conversation` (`string`, default `'none'`): [tweet embed parameter](https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/guides/embedded-tweet-parameter-reference) + +### `VAfter`, `VClick` and `VClicks` + +See https://sli.dev/guide/animations.html +### `Youtube` + +Embed a youtube video. + +#### Usage + +~~~md + ~~~ +Parameters: + +* `id` (`string`, required): id of the youtube video +* `width` (`number`): width of the video +* `height` (`number`): height of the video ## Custom Components