Navigation bar
Controls the bottom floating navigation bar: Select and Pan (
toolControls, each shown while its tool is enabled, the one in use marked), then previous, the page number, "of N", next, zoom out, the zoom value, zoom in. First and last pages fold into the number box (type a page, or use Home/End); the zoom value opens a menu with Fit width (⌘1), Fit page (⌘0) and the presets, the one in effect ticked. The bar stays at full strength; with fade it fades to 40% after three seconds without scrolling or pointer movement and returns on any, so it stops covering the bottom of the page being read. The section also holds the keyboard shortcuts switch and the zoom range, steps and initial level.NavigationBarConfigconfig.navigation
Example
viewer.tsTypeScript
navigation: { fade: true, keyboardShortcuts: true, zoomPresets: [0.5, 0.75, 1, 1.5, 2], minZoom: 0.25, maxZoom: 4, defaultZoom: 'fit-width', }
Options 12
Show or hide the navigation bar.
enabledTypeScript
navigation: { enabled: false }
Previous, page number "of N", next. First and last pages fold into the number box: type a page, or use Home/End. With
pageControls, zoomControls and toolControls all off, no bar is mounted at all.Zoom out, the zoom value + menu, zoom in. The zoom value opens a menu with Fit width (⌘1), Fit page (⌘0) and the presets, the one in effect ticked.
Select and Pan at the start of the bar, for each that is enabled, the one in use marked.
Fade to 40% after three seconds without activity (scrolling or pointer movement), back on any, so the bar stops covering the bottom of the page being read.
fadeTypeScript
navigation: { fade: true }
Enable keyboard shortcuts.
false turns the page-level shortcuts off, Ctrl / ⌘ + Z included; Escape, and the keys that act on something selected (a placed object, the search bar, Enter in Add Text), belong to that control and stay on. See Keyboard shortcuts for the full list.keyboardShortcutsTypeScript
navigation: { keyboardShortcuts: false }
Zoom menu levels and button steps (1 = 100%), kept inside
minZoom–maxZoom. The default applies when the option is left out (it is not a key of DEFAULT_CONFIG). Presets are sorted and de-duplicated; a level outside minZoom–maxZoom is left out with a console warning. When none is left, the default levels inside the range are used, and when none of those fits either, the range's two ends — the zoom menu never offers a level the viewer will not reach.zoomPresetsTypeScript
navigation: { zoomPresets: [0.5, 1, 1.5, 2] }
Trackpad pinch / Ctrl+wheel over the pages zooms the document, around the pointer, so what is under it stays put — instead of the browser zooming the whole page.
Two-finger pinch on a touchscreen zooms the document, around the point between the fingers, which the document follows as they move — instead of the browser zooming the whole page. A pinch begun while a drawing tool is drawing with the first finger calls that stroke off. Off, pinching is left to the browser; do not add
user-scalable=no to the viewport meta tag (see Quick start and the container).Smallest zoom the controls and the wheel reach. A fit mode may land below it on a narrow screen.
Largest zoom they reach; past the last preset the buttons step by a quarter. Text and vector art stay sharp up to it: a page bitmap is bounded by
performance.maxRenderPixels, and past that the part in view is drawn again at full resolution over it.Initial zoom level on load. A number is a scale (e.g.
0.75 = 75%, 1.5 = 150%), and a ceiling: a page that would overflow the width at it opens at fit-width instead, on any screen; a phone-sized layout (narrow/tiny) fits it again when turned or shrunk to that size. A zoom below fit-width stays.'fit-width'Default. Fits page width to container.'fit-page'Fits entire page into viewport.numberA scale (0.75= 75%,1.5= 150%), and a ceiling: a page that would overflow the width at it opens at fit-width instead.
defaultZoomTypeScript
navigation: { defaultZoom: 'fit-page' }