Globale Ebnen
Verfügbar seit v0.17
Globale Ebenen erlauben es, Komponenten zu nutzten, die über Folien bestehend bleiben. Solche können zu Beispiel für Kopf- oder Fußzeilen, Folienübergreifende Animationen oder Globale Effekte nützlich sein.
Slidev bietet dafür 3 Ebenen. Erstelle eine global-top.vue, global-bottom.vue oder custom-nav-controls.vue Datei unter dem Projektstamm und die Ebenen werden automatisch aufgenommen.
Ebenenbeziehung:
- Global Top (
global-top.vue) - Slides
- Global Bottom (
global-bottom.vue) - NavControls
- Individualisierte Navigationsoberfläche (
custom-nav-controls.vue)
- Individualisierte Navigationsoberfläche (
Beispiel
<!-- global-bottom.vue -->
<template>
<footer class="absolute bottom-0 left-0 right-0 p-2">Dein Name</footer>
</template>
Der Text Dein Name wird auf allen Folien erscheinen.
<!-- custom-nav-controls -->
<template>
<button class="icon-btn" title="Next" @click="$slidev.nav.next">
<carbon:arrow-right />
</button>
</template>
Der Button Next erscheint in der Navigationsoberfläche.
Der Vue Global Context kann angewendet werden, um diese bedingt zu aktivieren.
<!-- Fußzeile von Seite 4 ausblenden -->
<template>
<footer
v-if="$slidev.nav.currentPage !== 4"
class="absolute bottom-0 left-0 right-0 p-2"
>
Dein Name
</footer>
</template>
<!-- Fußzeile vom "cover"-Layout ausblenden -->
<template>
<footer
v-if="$slidev.nav.currentLayout !== 'cover'"
class="absolute bottom-0 left-0 right-0 p-2"
>
Dein Name
</footer>
</template>
<!-- eine Beispiel-Fußzeile für Folien -->
<template>
<footer
v-if="$slidev.nav.currentLayout !== 'cover'"
class="absolute bottom-0 left-0 right-0 p-2"
>
{{ $slidev.nav.currentPage }} / {{ $slidev.nav.total }}
</footer>
</template>
<!-- custom-nav-controls -->
<!-- verstecke den Button im Präsentationsmodus -->
<template>
<button v-if="!$slidev.nav.isPresenter" class="icon-btn" title="Next" @click="$slidev.nav.next">
<carbon:arrow-right />
</button>
</template>