Skip to main content

overflow

overflow: "collapse" | "wrap" | "menu"

this property controls how the toolbar handles items that can't fit on the screen. the default value is "wrap".

Usage​

Collapsing to an Icon​

when button's group can't fit on a screen, collapse it to an icon. this will only work if group blocks are present in the configuration.

<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 there is a need to collapse the whole toolbar, all icons should be placed in the top-level "row" block.

Wrapping to the Next Line​

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

<Toolbar overflow="wrap" />

Moving to a Popup Menu​

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

<Toolbar overflow="menu" />