The Switcher

<switcher-l layout="threshold:250px gap:3 reverse">...</switcher-l>

The switcher is a flexbox which displays its elements in a row and ‘switch’ its display in a column bellow a specific width.

You don’t have to use any media queries because the breakpoint is not based on the screen width but on the switcher width!

When to use ?

You want to show elements in a row but in column when:

• the container is less wide than a specific value (threshold).
• there are more child elements thant a specific value (limit).

Attributes

• threshold : a width below which the elements are displayed in column.
• gap : the space between child elements.
• reverse : if present, change the order of the elements when wrapped (the last child will be on top, and the first one on the bottom).
• limit : defines the maximum number of child the switcher can have while beeing in a row direction (beyond this value it will switch to column display).

threshold

Try to resize the switcher bellow and you will see that bellow 500px its layout will switch from row to column.

reverse

Using reverse will reverse the elements order once switched. Check it by yourself!

limit

In this example, we will see how the limit works. Here we have set a limit at 3 and the switcher have 3 child. Therefore, the switcher will be in column because we have reached the limit.