Komponenten #

Built-in Komponenten #

Die Dokumentation ist in diesem Bereich noch in Bearbeitung. Schaue dir doch den Quellcode selbst an, bevor die Dokumentation fertig ist.

Toc #

Fügt ein Inhaltsverzeichnis ein.

Wenn Folien nicht im Inhaltsverzeichnis erscheinen sollen, muss das im Frontmatter der Folie angegeben werden:

---
hideInToc: true
---

Titel werden durch die <Titles> Komponente angezeigt.

Nutzung #

<Toc />

Parameter:

• columns (string | number, standard: 1): Die Anzahl an Spalten, die gezeigt werden soll
• listClass (string | string[], standard: ''): Klassen, die der dem Inhaltsverzeichnis zugewiesen werden sollen
• maxDepth (string | number, standard: Infinity): Die maximale Tiefe des anzuzeigenden Titels
• minDepth (string | number, standard: 1): Die minimale Tiefe des anzuzeigenden Titels
• mode ('all' | 'onlyCurrentTree'| 'onlySiblings', standard: 'all'):
  • 'all': Zeigt alle Einträge
  • 'onlyCurrentTree': Zeigt nur Einträge, die sich im aktuellen Pfad befinden (aktive, Eltern und Kinder Einträge)
  • 'onlySiblings': Zeigt nur Einträge aus dem aktuellen Pfad und die direkten Geschwister

Link #

Fügt einen Link ein, der zu einer Folie navigiert.

Nutzung #

<Link to="42">Gehe zur Folie 42</Link>
<Link to="42" title="Gehe zur Folie 42"/>

Parameter:

• to (string | number): Der Pfad der Folie, zu der navigiert werden soll (Folien starten bei 1)
• title (string): Der anzuzeigende Titel

Titles #

Fügt den Haupttitel einer Folie als geparstes HTML ein.

Titel und Titelebenen werden automatisch aus dem ersten Titelelement jeder Folie abgerufen.

---
title: Eine Tolle Folie
level: 2
---

Nutzung #

Die <Titles> Komponente ist eine virtuelle Komponente, die wie folgend importiert werden kann:

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

Dann kann man sie nutzen:

<Titles no="42" />

Parameter:

• no (string | number): Die Nummer der Folie, von der der Titel gezeigt werden soll (Folien starten bei 1)

LightOrDark #

Kann verwendet werden, um je nach aktivem hellen oder dunklen Theme das eine oder andere anzuzeigen.

Verwendung #

Verwendung mit den beiden benannten Slots #dark und #light:

<LightOrDark>
  <template #dark>Dunkler Modus ist eingeschaltet</template>
  <template #light>Heller Modus ist eingeschaltet</template>
</LightOrDark>

Props, die von LightOrDark bereitgestellt werden, sind mit Hilfe von scoped slot props verfügbar:

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

In den Slots kann Markdown verwendet werden, muss aber mit einer freien Zeile umrandet werden:

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

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

  </template>
</LightOrDark>

Eigene Komponenten #

Erstelle einen Ordner components/ im Ursprung deines Projektverzeichnisses. Dort können eigene Vue Komponenten erstellt werden, die dann ganz einfach in der Markdown Datei genutzt werden können.

Erfahre mehr über Individualisierung

Komponenten bereitgestellt von Themen #

Themen können auch eigene Komponenten bereitstellen. Diese sind in der Dokumentation der jeweiligen Themen aufgelistet und erklärt.

Mehr Informationen über die Ordner Struktur