Skip to main content

overflow

Description​

Optional. Controls how the toolbar handles items that do not fit on the screen

Usage​

overflow?: "collapse" | "wrap" | "menu";

Examples​

When button's group can't fit on a screen, collapse it to an icon:

<Toolbar
  overflow="collapse"
  items={[
    {
      id: "font-family",
      comp: "richselect",
    },
    {
      id: "font-size",
      comp: "richselect",
    },
    {
      // this group may collapse on overflow
      layout: "row",
      items: [
        {
          id: "font-bold",
          comp: "icon",
          icon: "wxi-bold",
        },
        {
          id: "font-italic",
          comp: "icon",
          icon: "wxi-italic",
        },
        {
          id: "font-underline",
          comp: "icon",
          icon: "wxi-underline",
        },
      ],
    },
  ]}
/>

If you want to collapse whole toolbar, put all icons in top level "row" block.

When buttons can't fit on a screen, wrap them on the next line:

<Toolbar overflow="wrap" />

this is the default behavior. on overflow, menu item will be placed on next line of the toolbar.

When button's group can't fit on a screen, move them to the popup menu:

<Toolbar overflow="menu" />