Basic Toolbar Usage

Show/Hide Top Bar and Left Sidebar

Change Visibility of Top Bar

The top bar can be shown or hidden by changing the :toolbar-options property. Setting it to true will display the top bar (the default setting), while setting it to false will hide it. This feature provides flexibility for users to customize the interface based on their needs or preferences.

<VPdfViewer :src="samplePDF" :toolbar-options="false" />

Change Visibility of Left Sidebar

The sidebarEnable is a property that can be used in conjunction with the :toolbar-options property to control the visibility of the left sidebar.

INFO

There are specific conditions regarding the top bar and left sidebar visibility:

• The left sidebar can be hidden without affecting the visibility of the top bar.
• When the :toolbar-options property is set to false, the left sidebar is automatically hidden, as it cannot function independently without the top bar.

To hide the left sidebar without hiding the top bar, use the following setting:

<VPdfViewer
    :src="samplePDF"
    :toolbar-options="{
        sidebarEnable: false,
    }" 
/>

Show/Hide Icons on Top Bar

Change Visibility of Each Icon

You can easily control the visibility of top bar icons in Vue PDF Viewer by toggling their respective settings. Use the toolbar-options prop to specify which icons should appear on the top bar.

Here's how you can configure the top bar:

<VPdfViewer
    :src="samplePDF"
    :toolbar-options="{
        themeSwitchable: false,
        newFileOpenable: false,
        downloadable: false,
        printable: false,
        fullscreen: false,
    }" 
/>

For a full list of available toolbar options and their descriptions, see the Toolbar Options documentation.