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

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)

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>