interface-ipluginconfigextensionpoints

Interface: IPluginConfigExtensionPoints

Extensions points allow you to enhance the user interface with buttons.

You can define your own buttons using these extensions points, each extension
points accepts a specific configuration and has its own limitations.

Some extensions points only allow you to add up to one button.

Read more about Extension Points

Hierarchy

  • IPluginConfigExtensionPoints

Index

Properties

Properties

bottomBar

Optional bottomBar: ButtonExtensionPoint<BottomBarButton>

The toolbar seen on the bottom left side of the board

You can directly define a BottomBarButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      bottomBar: {
        title: "The button title",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a bottom bar item!");
        },
      },
    },
  });
});

exportMenu

Optional exportMenu: ButtonExtensionPoint<ExportMenuButton>

The toolbar seen when the user opens the export menu.

You can directly define a ExportMenuButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      exportMenu: {
        title: "The button title",
        svgIcon:
          '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a export menu item!");
        },
      },
    },
  });
});


getWidgetMenuItems

Optional getWidgetMenuItems: undefined | (widgets: IWidget[], editMode: boolean) => Promise<IWidgetMenuItem | IWidgetMenuItem[]>

Deprecated
This method is deprecated.

deprecated


toolbar

Optional toolbar: ButtonExtensionPoint<ToolbarButton>

The toolbar seen on the left side of the board

You can directly define a ToolbarButton or a function returning a
promise that resolves on one.

Example

miro.onReady(() => {
  miro.initialize({
    extensionPoints: {
      toolbar: {
        title: "The button title",
        librarySvgIcon:
          '<circle cx="12" cy="12" r="9" fill="blue" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        toolbarSvgIcon:
          '<circle cx="12" cy="12" r="9" fill="red" fill-rule="evenodd" stroke="currentColor" stroke-width="2"/>',
        onClick: () => {
          miro.showNotification("You clicked a toolbar item!");
        },
      },
    },
  });
});


Did this page help you?