[Slidev]スライドにヘッダーやフッター、ページ番号を挿入する
Slidevではグローバルレイヤーを使用することで、ヘッダーやフッター、ページ番号を挿入することができます。
プロジェクトのルートにglobal-top.vueやglobal-bottom.vueを作成し、ヘッダーやフッター、ページ番号の設定を行います。
ヘッダーの挿入
<template>
<footer class="absolute top-0 right-0 p-2">これはヘッダーです</footer>
</template>
top-0とするとヘッダーにテキストが表示されます。right-0とすると右寄せでテキストが表示されます。topやrightの数字で余白を設定します。なお、topやbottom、leftやrightを何も指定しないとデフォルトでtop、leftに表示されます。
pでフォントサイズを設定します。
フッターの挿入
<template>
<footer class="absolute bottom-0 left-0 p-2">これはフッターです</footer>
</template>
bottom-0とするとフッターにテキストが表示されます。left-0とすると左寄せでテキストが表示されます。余白の設定はヘッダーと同じです。表示位置のデフォルトもヘッダーと同じでtop、leftに表示されます。
ページ番号の挿入
<template>
<footer class="absolute bottom-0 left-0 right-0 p-2">
{{ $slidev.nav.currentPage }} / {{ $slidev.nav.total }}
</footer>
</template>
$slidev.navプロパティにアクセスすると、現在のページ数やスライド全体のページ数を取得することができます。
$slidev.navプロパティは他にもスライドナビゲーションのコントロールなども保持しています。詳しくは以下のページをご参照ください。
所感
global-top.vueとglobal-bottom.vueの違いは何なんでしょうか…
global-bottom.vueならデフォルトでボトムに文字が入るのかと思いましたが、トップに入りました。
まだBeta版ということもあり、今後何か変更があるかもしれないので、ヘッダーに書きたいことはglobal-top.vueに、フッターに書きたいことはglobal-bottom.vueに記述しておくと無難かなと考えています。
中央揃えの方法も分かりません…
今はとりあえずleft-90で良い感じに中央のあたりに配置されたので、leftもしくはrightで微調整することで対応しています。
このあたりの詳細をご存知の方はコメントで教えていただけると嬉しいです！
Discussion