Skip to main content

layout

Description​

Optional. Defines the direction in which toolbar items are arranged

Usage​

layout?: "row" | "column";

Parameters​

  • "row" - (default) items are arranged horizontally
  • "column" - items are arranged vertically

Examples​

Vertical toolbar​

<Toolbar
  layout="column"
  items={[
    { comp: "icon", icon: "wxi-search" },
    { comp: "icon", icon: "wxi-plus" },
    { comp: "icon", icon: "wxi-pencil" },
  ]}
/>

Vertical toolbar with row groups​

<Toolbar
  layout="column"
  items={[
    {
      items: [
        { comp: "icon", icon: "wxi-close", id: "close" },
        { comp: "spacer" },
        { type: "primary", comp: "button", text: "Save", id: "save" },
      ],
    },
    {
      items: [
        { comp: "tabs", id: "batch", options },
      ],
    },
  ]}
/>

Related article: Changing Toolbar orientation