Composables
usePdfKitViewMode
Mengatur mode tampilan dan mode gulir.
Composable ini berfungsi untuk mengontrol mode tampilan (view mode) dan mode gulir (scroll mode) pada viewer PDF.
Cara Penggunaan
const {
viewMode,
scrollMode,
setViewMode,
setScrollMode,
} = usePdfKitViewMode()
Opsi
usePdfKitViewMode({
initialViewMode: 'single',
initialScrollMode: 'vertical',
})
| Opsi | Tipe | Default | Deskripsi |
|---|---|---|---|
initialViewMode | ViewMode | 'single' | Mode tampilan awal |
initialScrollMode | ScrollMode | 'vertical' | Mode gulir awal |
Nilai Kembalian
| Properti | Tipe | Deskripsi |
|---|---|---|
viewMode | Ref<ViewMode> | Mode tampilan saat ini |
scrollMode | Ref<ScrollMode> | Mode gulir saat ini |
setViewMode | (mode: ViewMode) => void | Mengatur mode tampilan |
setScrollMode | (mode: ScrollMode) => void | Mengatur mode gulir |
Tipe Data
type ViewMode = 'single' | 'dual' | 'dual-cover'
type ScrollMode = 'vertical' | 'horizontal' | 'wrapped' | 'page'
Mode Tampilan
| Mode | Deskripsi |
|---|---|
single | Menampilkan satu halaman dalam satu waktu |
dual | Menampilkan dua halaman berdampingan |
dual-cover | Menampilkan dua halaman dengan halaman pertama sebagai sampul |
Mode Gulir
| Mode | Deskripsi |
|---|---|
vertical | Menggulir halaman secara vertikal |
horizontal | Menggulir halaman secara horizontal |
wrapped | Menampilkan halaman dalam tata letak grid |
page | Navigasi halaman per halaman |
Contoh
<template>
<div class="flex gap-4">
<div>
<p>Mode Tampilan:</p>
<UButtonGroup>
<UButton
:variant="viewMode === 'single' ? 'solid' : 'outline'"
@click="setViewMode('single')"
>
Single
</UButton>
<UButton
:variant="viewMode === 'dual' ? 'solid' : 'outline'"
@click="setViewMode('dual')"
>
Dual
</UButton>
</UButtonGroup>
</div>
<div>
<p>Mode Gulir:</p>
<UButtonGroup>
<UButton
:variant="scrollMode === 'vertical' ? 'solid' : 'outline'"
@click="setScrollMode('vertical')"
>
Vertical
</UButton>
<UButton
:variant="scrollMode === 'horizontal' ? 'solid' : 'outline'"
@click="setScrollMode('horizontal')"
>
Horizontal
</UButton>
</UButtonGroup>
</div>
</div>
</template>
<script setup>
const {
viewMode,
scrollMode,
setViewMode,
setScrollMode
} = usePdfKitViewMode()
</script>