CSS: Toolbar

Toolbar

.PSPDFKit-Toolbar

The toolbar is positioned on the top of PSPDFKit for Web and contains the most important buttons for a user to interact with the PDF, like zooming, creating annotations or starting a search.

.PSPDFKit-Toolbar-Button-Sidebar

Toggles the sidebar.

.PSPDFKit-Toolbar-Button-Sidebar-Thumbnails

Is also: .PSPDFKit-Toolbar-Button-Sidebar
Toggles the sidebar with the document pages thumbnails.

.PSPDFKit-Page-Indicator-Prev

Can also be: .PSPDFKit-Page-Indicator-Prev-disabled
Button to go to the previous page. If the user is on the first page, it gets disabled.

.PSPDFKit-Page-Indicator-Next

Can also be: .PSPDFKit-Page-Indicator-Next-disabled
Button to go to the next page. If the user is on the last page, it gets disabled.

.PSPDFKit-Page-Indicator-Input

Input field that shows the current page. This changes when the user scrolls to another page and can get modified by the user to jump to a specific page.

.PSPDFKit-Toolbar-Button

Can also be: .PSPDFKit-Toolbar-Button-active .PSPDFKit-Toolbar-Button-disabled
Every button within the toolbar can be selected with this class. Some buttons can get active (for example, when the user activates an annotation mode) and also can get disabled (for example, the next-page button gets disabled when the user is on the last page).

.PSPDFKit-Toolbar-Button-Icon

Icon inside a `.PSPDFKit-Toolbar-Button`.

.PSPDFKit-Toolbar-Button-Pan

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-disabled
Button to enable or disable the pan mode that allows the user to navigate the page by using a drag feature. This button will not be available on mobile devices.

.PSPDFKit-Toolbar-Button-Zoom-Out

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-disabled
Button to zoom out gets disabled when the user reached the minimum zoom level.

.PSPDFKit-Toolbar-Button-Zoom-In

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-disabled
Button to zoom in gets disabled when the user reached the maximum zoom level.

.PSPDFKit-Toolbar-Button-Fit-To-Page

Is also: .PSPDFKit-Toolbar-Button
Button to fit the complete page into the viewport. Is only visible when "fit to width" is set.

.PSPDFKit-Toolbar-Button-Fit-To-Width

Is also: .PSPDFKit-Toolbar-Button
Button to fit the width of the page into the viewport. Is only visible when "fit to page" is set.

.PSPDFKit-Toolbar-Button-Text-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to activate text annotation mode. It is active, when the user starts to create a new text annotation.

.PSPDFKit-Toolbar-Button-Ink-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to activate ink annotation mode. It is active, when the user starts to create a new ink annotation.

.PSPDFKit-Toolbar-Button-Note-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to activate note annotation mode. It is active, when the user starts to create a new note annotation.

.PSPDFKit-Toolbar-Button-InkSignature-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to place ink signatures onto a page.

.PSPDFKit-Toolbar-Button-Image-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to place image annotations onto a page.

.PSPDFKit-Toolbar-Button-Stamp-Annotation

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to show the Stamp Picker UI.

.PSPDFKit-Toolbar-Button-Print

Is also: .PSPDFKit-Toolbar-Button
Button to print the document.

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to show the search component. It is active while the search is visible.

.PSPDFKit-Toolbar-Button-Annotate

Is also: .PSPDFKit-Toolbar-Button
Can also be: .PSPDFKit-Toolbar-Button-active
Button to show the annotation tools when on a small screen.

.PSPDFKit-Toolbar-Button-Layout-Config

Is also: .PSPDFKit-Toolbar-Button
Button to open the layout configuration menu.