Diese Übersetzung wird nicht mehr gepflegt, bitte besuchen Sie das englische Dokument.

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

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