Skip to main content

overflow

overflow: 'collapse' | 'wrap' | 'menu'

this property controls how the toolbar handles items that do not fit on the screen. The default value is 'wrap'.

Usage​

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" />