Kolibry

Components

Built-in Components

Arrow

Draw an arrow.

Usage 

<Arrow x1="10" y1="20" x2="100" y2="200" />

Or:

<Arrow v-bind="{ x1:10, y1:10, x2:200, y2:200 }" />

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 

<AutoFitText :max="200" :min="100" modelValue="Some text"/>

Parameters:

  • 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:

<LightOrDark>
  <template #dark>Dark mode is on</template>
  <template #light>Light mode is on</template>
</LightOrDark>

Provided props on LightOrDark component will be available using scoped slot props:

<LightOrDark width="100" alt="some image">
  <template #dark="props">
    <img src="/dark.png" v-bind="props"/>
  </template>
  <template #light="props">
    <img src="/light.png" v-bind="props"/>
  </template>
</LightOrDark>

You can provide markdown in the slots, but you will need to surround the content with blank lines:

<LightOrDark>
  <template #dark>
  
![dark](/dark.png)

  </template>
  <template #light>
  
![light](/light.png)

  </template>
</LightOrDark>

Insert a link you can use to navigate to a given slide.

Usage 

<Link to="42">Go to slide 42</Link>
<Link to="42" title="Go to slide 42"/>
<Link to="solutions" title="Go to solutions"/>

Parameters:

  • to (string | number): The path of the slide to navigate to (slides starts from 1)
  • title (string): The title to display

One can use a string as to, provided the corresponding route exists, e.g.

---
routeAlias: solutions
---
# Now some solutions!

RenderWhen

Render slot only when the context match (for example when we are in presenter view).

Usage 

<RenderWhen context="presenter">This will only be rendered in presenter view.</RenderWhen>

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 

<SlideCurrentNo />

SlidesTotal

Total number of slides.

Usage 

<SlidesTotal />

Titles

Insert the main title from a slide parsed as HTML.

Titles and title levels get automatically retrieved from the first title element of each slides.

You can override this automatic behaviour for a slide by using the front matter syntax:

---
title: Amazing slide title
level: 2
---

Usage

The <Titles> component is a virtual component you can import with:

import Titles from '/@kolibry/titles.md'

Then you can use it with:

<Titles no="42" />

Parameters:

  • no (string | number): The number of the slide to display the title from (slides starts from 1)

Toc

Insert a Table Of Content.

If you want a slide to not appear in the <Toc> component, you can use in the front matter block of the slide:

---
hideInToc: true
---

Titles are displayed using the <Titles> component

Usage 

<Toc />

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 

<Transform :scale="0.5">
  <YourElements />
</Transform>

Parameters:

  • scale (number | string, default 1): transform scale value
  • origin (string, default 'top left'): transform origin value

Tweet

Embed a tweet.

Usage 

<Tweet id="20" />

Parameters:

  • id (number | string, required): id of the tweet
  • scale (number | string, default 1): transform scale value
  • conversation (string, default 'none'): tweet embed parameter

VAfter, VClick and VClicks

See https://kolibry.dev/guide/animations.html

Youtube

Embed a youtube video.

Usage 

<Youtube id="luoMHjh-XcQ" />

Parameters:

  • id (string, required): id of the youtube video
  • width (number): width of the video
  • height (number): height of the video

Custom Components

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!

Read more in the Customization section.

Theme-provided Components

Themes can provide components as well. Please read their documentations for what they have provided.

Check more in the directory structure section.