Nutrient Web SDK
    Preparing search index...

    Interface ToolbarItem

    Describes the properties of a Toolbar Item.

    Check out our guides for more examples.

    interface ToolbarItem {
        className?: string;
        disabled?: boolean;
        dropdownGroup?: string;
        icon?: string;
        id?: string;
        mediaQueries?: string[];
        node?: Node;
        onKeyPress?: (...args: unknown[]) => void;
        onPress?: (...args: any[]) => void;
        preset?: string;
        responsiveGroup?: string;
        selected?: boolean;
        title?: string;
        type: ToolbarItemType;
    }
    Index

    Properties

    className? disabled? dropdownGroup? icon? id? mediaQueries? node? onKeyPress? onPress? preset? responsiveGroup? selected? title? type

    Properties

    className?: string

    Useful to set a custom CSS class name on the parent. The class is applied based on the following logic:

    • For built-in toolbar items, theclassName is appended to the default item ones.
    • For custom items, it is applied to the parent of the node you passed.
    • For custom items, the icon's parent gets the same classname with an -Icon suffix.

    For eg: If you have passed a custom item with an icon, the icon's parent will get the classname my-custom-item-Icon if you passed the classname as my-custom-item.

    For default items theclassName is appended to the default item ones.

    disabled?: boolean

    Whether the item is disabled or not.

    The property can be used to force a built in toolbar item to be disabled by setting it to true.

    dropdownGroup?: string

    Can be used to group multiple toolbar buttons in the same ToolbarItem#dropdownGroup. Only one of the buttons will be visible, with a dropdown arrow to hint the user about the dropdown group. When the user clicks on the arrow, the rest of the buttons will be shown vertically piled.

    The toolbar buttons that belong to a dropdown group will preserve all the properties of individual toolbar buttons.

    In order to decide which toolbar item is visible, the following criteria is used:

    • If a button is globally selected, it's rendered on top.
    • Otherwise, the last globally selected button of the list is rendered on top.
    • If none of those has been selected before, the first button on the dropdown group is rendered on top.

    Note: It is not possible to override this option for built-in toolbar items.

    const toolbarItems = [
      {
        type: "responsive-group",
        id: "my-group",
        mediaQueries: ["(min-width: 980px)"],
        icon: "https://example.com/icon.png",
      },
      {
        type: "custom",
        id: "my-button-one",
        responsiveGroup: "my-group",
        dropdownGroup: "my-dropdown-group",
      },
      {
        type: "custom",
        id: "my-button-two",
        dropdownGroup: "my-dropdown-group",
      },
    ];
    icon?: string

    Icon for the item.

    The icon should either be an URL, a base64 encoded image or the HTML for an inline SVG.

    id?: string

    Unique identifier for the item.

    This is useful to identify items whose type is custom. Note: It is not possible to override this option for built-in toolbar items.

    // In your JavaScript
    const item = { type: 'custom', id: 'my-button', ... }
    mediaQueries?: string[]

    An array of valid media queries which are used to determine the visibility of an item.

    Internally media queries are managed using the Window.matchMedia() API.

    As per the W3C Spec in many cases media queries require parenthesis for example min-width: 480px won't work whereas (min-width: 480px) will.

    Overwrite the default media query for the zoom-in default button.

    const toolbarItems = NutrientViewer.defaultToolbarItems;
    const index = toolbarItems.findIndex(item => item.type === "zoom-in");
    toolbarItems[index]["mediaQueries"] = ["(min-width: 1000px)"];
    instance.setToolbarItems(toolbarItems);
    node?: Node

    Optionally custom tool items can define a DOM node. NutrientViewer renders this node instead of a standard tool button.

    In this case the tool item is rendered inside of a container which gets the title and className attributes set.

    The icon property is ignored. The selected and disabled are used just to toggle the PSPDFKit-Tool-Node-active and PSPDFKit-Tool-Node-disabled class names but making the node effectively selected or disabled is up to the implementation of the item.

    The onPress event is registered and fires any time the item is either clicked or selected with keyboard (if part of a dropdownGroup).

    onKeyPress?: (...args: unknown[]) => void
    onPress?: (...args: any[]) => void

    Callback to invoke when the item is clicked or tapped (on touch devices). It gets the event as first argument, the id of the tool item as the second.

    preset?: string

    Annotation preset for annotations. It will be passed to the onPress event handler in the third argument.

    responsiveGroup?: string

    Can be used to link multiple toolbar items to the same NutrientViewer.ToolbarItem#type | responsive-group. Those items will be hidden when the responsive group icon is displayed and can be seen when we click (i.e. open) the group.

    Whenever a toolbar item is active and it's responsive group is shown, the responsive group is open so the active state can be seen.

    Note: It is not possible to override this option for built-in toolbar items.

    const toolbarItems = [
      {
        type: "responsive-group",
        id: "my-group",
        mediaQueries: ["max-width..."],
        icon: "https://example.com/icon.png",
      },
      {
        type: "custom",
        id: "my-button-one",
        responsiveGroup: "my-group",
      },
      {
        type: "custom",
        id: "my-button-two",
        responsiveGroup: "my-group",
      },
    ];
    selected?: boolean

    Whether a custom item is selected or not.

    title?: string

    Title for the tool items.

    It is shown on hover or when the item doesn't have an icon.

    type: ToolbarItemType

    The type of a toolbar item.

    It can either be custom for user defined items, responsive-group to combine items on smaller screens, or one from the NutrientViewer.defaultToolbarItems.

    Special types:

    • responsive-group (and annotate as a predefined responsive group): These types can be referenced by other toolbar items via the ToolbarItem#responsiveGroup property. When the media query of the group matches, all referenced toolbar items will be hidden and the group's icon will be shown instead. When it is clicked, it will expand into the referenced toolbar items.

    Note: It is not possible to override this option for built-in toolbar items.

    // In your JavaScript
    const toolbarItems = NutrientViewer.defaultToolbarItems
    toolbarItems.push({ type: 'custom', ... })
    NutrientViewer.load({
      ...otherOptions,
      toolbarItems
    });

    Settings

    Member Visibility

    On This Page

    Properties