Global Layers

Διαθέσιμο από v0.17

Τα global layers σας επιτρέπουν να έχετε προσαρμοσμένα στοιχεία που είναι μόνιμα σε όλες τις διαφάνειες. Αυτό θα μπορούσε να είναι χρήσιμο για footers, κινήσεις διαφανειών, global effects, κτλ.

Το Slidev παρέχει τρία layers για αυτή τη χρήση, δημιουργήστε global-top.vue, global-bottom.vue ή custom-nav-controls.vue στη ρίζα του έργου σας και θα το αναλάβει αυτόματα.

Σχέση layers:

• Global Top (global-top.vue)
• Διαφάνειες
• Global Bottom (global-bottom.vue)
• NavControls
  • Προσαρμοσμένοι έλεγχοι πλοήγησης (custom-nav-controls.vue)

Παράδειγμα

<!-- global-bottom.vue -->
<template>
  <footer class="absolute bottom-0 left-0 right-0 p-2">Το ονομά σας</footer>
</template>

Το κείμενο Το ονομά σας θα εμφανιστεί σε όλες τις διαφάνειές σας.

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

Το κουμπί Next θα εμφανιστεί στο NavControls.

Για να το ενεργοποιήσετε υπό όρους, μπορείτε να το εφαρμόσετε με το Vue Global Context.

<!-- κρύψτε το footer στην Σελίδα 4 -->
<template>
  <footer
    v-if="$slidev.nav.currentPage !== 4"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Το ονομά σας
  </footer>
</template>

<!-- κρύψτε το footer στο "cover" layout -->
<template>
  <footer
    v-if="$slidev.nav.currentLayout !== 'cover'"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Το ονομά σας
  </footer>
</template>

<!-- ένα παράδειγμα footer για τις σελίδες -->
<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 -->
<!-- κρύψτε το κουμπί στη λειτουργία παρουσιαστή -->
<template>
  <button v-if="!$slidev.nav.isPresenter" class="icon-btn" title="Next" @click="$slidev.nav.next">
    <carbon:arrow-right />
  </button>
</template>