Fancyapps
Return to top
On this page

Toolbar

This plugin is used to extend Panzoom with a toolbar containing transform buttons. You can customize which buttons to show, their icons, as well as add new ones.

Examples

Basic example

All controls

This example demonstrates all available toolbar buttons

Usage

Include corresponding JS and CSS files:

js
import { Toolbar } from "@fancyapps/ui/dist/panzoom/panzoom.toolbar.esm.js";
import "@fancyapps/ui/dist/panzoom/panzoom.toolbar.css";

Pass plugin to the constructor. Use Toolbar.display option to specify which buttons to display and in what order:

js
const container = document.getElementById("myPanzoom");
const options = {
  Toolbar: {
    display: ["zoomIn", "zoomOut"],
  },
};

new Panzoom(container, options, { Toolbar });

JSFiddle Example

Available buttons

List of all buttons available by default:

"zoomIn",
"zoomOut",
"toggle1to1",
"toggleZoom",
"panLeft",
"panRight",
"panUp",
"panDown",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
"fitX",
"fitY",
"reset",
"toggleFS"

The meaning of each button should be clear from its name, for example, flipX would flip content horizontally.

Options

display

What buttons to display on the toolbar

Type

Array<keyof typeof ToolbarButtons>

Default

js
[
  "zoomIn",
  "zoomOut",
  "toggle1to1",
  "rotateCCW",
  "rotateCW",
  "flipX",
  "flipY",
  "reset",
  "toggleFS",
];

items

Object containing all buttons. Use this to add your own buttons

Type

Record<string, ToolbarItemType>

Default

PanzoomButtons

svgAttr

Common attributes that will be applied to any SVG icon inside the buttons

Type

Record<string, string>

Default

js
{
    tabindex: "-1",
    width: "24",
    height: "24",
    viewBox: "0 0 24 24",
    xmlns: "http://www.w3.org/2000/svg",
}