Komponen
Slots
Slot yang tersedia untuk kustomisasi NuxtPdfKit.
Komponen NuxtPdfKit menyediakan beragam slot yang bisa kamu manfaatkan untuk kustomisasi tampilan sesuai kebutuhan.
| Slot | Deskripsi |
|---|---|
loader | Tampilan loading kustom saat PDF sedang dimuat. |
thumbnail-tool | Tombol toggle thumbnail kustom. |
page-navigation-tool | Kontrol navigasi halaman kustom. |
zoom-tool | Kontrol zoom kustom. |
loader
Tampilan loading khusus yang muncul saat PDF sedang diproses.
<template>
<NuxtPdfKit src="/document.pdf">
<template #loader>
<div class="flex items-center gap-2">
<UIcon name="i-lucide-loader" class="animate-spin" />
<span>Sedang menyiapkan dokumenmu...</span>
</div>
</template>
</NuxtPdfKit>
</template>
Contoh Loader Kustom
<template>
<NuxtPdfKit src="/large-document.pdf">
<template #loader>
<div class="flex flex-col items-center justify-center h-full gap-4">
<div class="relative">
<UIcon
name="i-lucide-file-text"
class="w-16 h-16 text-primary"
/>
<UIcon
name="i-lucide-loader-2"
class="absolute -right-2 -bottom-2 w-6 h-6 animate-spin text-primary"
/>
</div>
<div class="text-center">
<p class="font-semibold">Memuat Dokumen</p>
<p class="text-sm text-gray-500">Mohon tunggu...</p>
</div>
</div>
</template>
</NuxtPdfKit>
</template>
thumbnail-tool
Tombol toggle thumbnail kustom.
<template>
<NuxtPdfKit src="/document.pdf">
<template #thumbnail-tool>
<UButton icon="i-lucide-panel-left">
Thumbnail
</UButton>
</template>
</NuxtPdfKit>
</template>
page-navigation-tool
Kontrol navigasi halaman kustom.
<template>
<NuxtPdfKit src="/document.pdf">
<template #page-navigation-tool>
<div class="flex items-center gap-2">
<!-- Navigasi kustom -->
</div>
</template>
</NuxtPdfKit>
</template>
zoom-tool
Kontrol zoom kustom.
<template>
<NuxtPdfKit src="/document.pdf">
<template #zoom-tool>
<div class="flex items-center gap-2">
<!-- Kontrol zoom kustom -->
</div>
</template>
</NuxtPdfKit>
</template>
search, rotate, openFile, print, download, fullscreen, themeToggle, moreOptions) tidak menyediakan slot bernama di versi saat ini. Untuk mengkustomisasinya, sembunyikan tool bawaan melalui prop toolbar dan sediakan kontrol sendiri di samping viewer.