<le-toolbar-spacer>

The <le-toolbar-spacer> component is a special spacer element that can be used inside <le-toolbar> to create flexible spacing between toolbar items. It can be configured to collapse and expand based on the available space in the toolbar, allowing for responsive and adaptive layouts.

And when the spacer has an attribute width, it will have a fixed width and will collapse like any other fixed width item in the toolbar.

Usage

To use the <le-toolbar-spacer>, simply include it as a child of a <le-toolbar> element. You can place it between toolbar items to create flexible spacing.

In the following example, the first spacer will take up all the available space between the "Left" and "Middle" buttons, while the second spacer will have a fixed width of 100 pixels, creating a gap between the "Middle" and "Right" buttons.

Notice how the "Middle" button is jumping to the "Right" when the fixed-width spacer collapses.

      <le-toolbar>
        <le-button priority="1">Left</le-button>
        <le-toolbar-spacer></le-toolbar-spacer>
        <le-button priority="2">Middle</le-button>
        <le-toolbar-spacer width="100"></le-toolbar-spacer>
        <le-button priority="3">Right</le-button>
      </le-toolbar>

Properties / Attributes

@width

Possible values:

• a number (e.g., 100)
• a CSS length value (e.g., 5rem)

The @width property specifies that the spacer should have a fixed width.

Fixed-width spacers will collapse like any other fixed-width item in the toolbar, while spacers without a specified width will flexibly take up available space.