Cette traduction est obsolète, veuillez consulter le document en anglais.
Slidev

Couches globales

Disponible depuis v0.17

Les couches globales vous permettent d'avoir des composants personnalisés qui persistent sur les diapositives. Cela pourrait être utile pour avoir des pieds de page, des animations de diapositives croisées, des effets globaux, etc.

Slidev fournit deux couches pour cet usage, créez global-top.vue, global-bottom.vue ou custom-nav-controls.vue sous la racine de votre projet et il reprendra automatiquement.

Relation des couches :

  • Global Top (global-top.vue)
  • Diapositives
  • Global Bottom (global-bottom.vue)
  • NavControls
    • Customized Navigation Controls (custom-nav-controls.vue)

Exemple 

<!-- global-bottom.vue -->
<template>
  <footer class="absolute bottom-0 left-0 right-0 p-2">Votre nom</footer>
</template>

Le texte Votre nom apparaîtra sur toutes vos diapositives.

<!-- custom-nav-controls -->
<template>
  <button class="icon-btn" title="Next" @click="$slidev.nav.next">
    <carbon:arrow-right />
  </button>
</template>

Le bouton Next apparaîtra dans NavControls.

Pour l'activer conditionnellement, vous pouvez l'appliquer avec le Contexte Global Vue.

<!-- masquer le pied de page de la page 4 -->
<template>
  <footer
    v-if="$slidev.nav.currentPage !== 4"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Votre name
  </footer>
</template>

<!-- masquer le pied de page de la mise en page "cover" -->
<template>
  <footer
    v-if="$slidev.nav.currentLayout !== 'cover'"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Votre nom
  </footer>
</template>

<!-- un exemple de pied de page pour les pages -->
<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 -->
<!-- hide the button in Presenter model -->
<template>
  <button v-if="!$slidev.nav.isPresenter" class="icon-btn" title="Next" @click="$slidev.nav.next">
    <carbon:arrow-right />
  </button>
</template>