グローバルレイヤー

v0.17から使用可能です

グローバルレイヤーを使用すると、スライド間で永続的なカスタムコンポーネントを持つことができます。これはフッター、スライドをまたぐアニメーション、グローバルエフェクトなどに便利です。

Slidevはこのために2つのレイヤーを提供しています。プロジェクトのルートにglobal-top.vueやglobal-bottom.vueを作成すると、自動的にピックアップされます。

レイヤーの関係性：

グローバルトップ (global-top.vue)
スライド
グローバルボトム (global-bottom.vue)

例

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

Your Nameという文字はすべてのスライドに表示されます。

条件付きで有効にするには、Vueグローバルコンテキストを使用して適用します。

<!-- Page 4からフッターを隠します-->
<template>
  <footer
    v-if="$slidev.nav.currentPage !== 4"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Your Name
  </footer>
</template>

<!-- "cover"レイアウトからフッターを隠します -->
<template>
  <footer
    v-if="$slidev.nav.currentLayout !== 'cover'"
    class="absolute bottom-0 left-0 right-0 p-2"
  >
    Your Name
  </footer>
</template>

<!-- ページ用フッターの一例 -->
<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>

# グローバルレイヤー

# 例

グローバルレイヤー

例