Switcher

Import#

import { Switcher } from '@volue/wave-react';

Background#

For smaller numbers of items, there may be cases where you wish to switch directly from a horizontal (one row) to a vertical (one column) layout and bypass any intermediary layout states. This is exactly what Switcher layout does: it switches between a horizontal and a vertical layout at a given, container-based threshold. Switcher is especially useful when each of the items should be considered equivalent, or part of a continuum. Say, you have three cards and don’t want an “awkward situation” in which one of the cards is placed all alone on a new row.

Switcher, similar to Auto Grid fits into any container and adapts automatically thanks to CSS grid’s auto-fit() and minmax() functions, eliminating the need for viewport @media queries altogether.

Examples#

Default configuration#

Configuring threshold#

In the example below threshold is set to 25rem, meaning when the parent element (the container) is less than 25rem wide, the layout will switch to a vertical configuration.

Configuring limit#

The more elements you add, the less space each gets alloted, and things can easily start to get squashed up in horizontal layout. Set limit to control maximum number of items allowed to appear in one row. When the limit gets exceeded, wrapping will ocur.

Alignment#

Items can be aligned on the block (column) axis via alignItems property.

API Reference#