Composables
usePdfKitViewMode
View mode and scroll mode.
Controls the view mode and scroll mode of the PDF viewer.
Usage
const {
viewMode,
scrollMode,
setViewMode,
setScrollMode,
} = usePdfKitViewMode()
Options
usePdfKitViewMode({
initialViewMode: 'single',
initialScrollMode: 'vertical',
})
| Option | Type | Default | Description |
|---|---|---|---|
initialViewMode | ViewMode | 'single' | Initial view mode |
initialScrollMode | ScrollMode | 'vertical' | Initial scroll mode |
Return Values
| Property | Type | Description |
|---|---|---|
viewMode | Ref<ViewMode> | Current view mode |
scrollMode | Ref<ScrollMode> | Current scroll mode |
setViewMode | (mode: ViewMode) => void | Set view mode |
setScrollMode | (mode: ScrollMode) => void | Set scroll mode |
Types
type ViewMode = 'single' | 'dual' | 'dual-cover'
type ScrollMode = 'vertical' | 'horizontal' | 'wrapped' | 'page'
View Modes
| Mode | Description |
|---|---|
single | Display one page at a time |
dual | Display two pages side by side |
dual-cover | Display two pages with first page as cover |
Scroll Modes
| Mode | Description |
|---|---|
vertical | Scroll vertically through pages |
horizontal | Scroll horizontally through pages |
wrapped | Wrap pages in a grid layout |
page | Navigate page by page |
Example
<template>
<div class="flex gap-4">
<div>
<p>View Mode:</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>Scroll Mode:</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>