Switcher

The direction of content flow switches depending on the content. If the width of the switcher block is smaller than the "threshold", it becomes one column.

Usage

<div data-unitone-layout="switcher">
	<div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #3730a3; --unitone--color: #fff">Lorem ipsum</div>
	<div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #5b21b6; --unitone--color: #fff">dolor sit</div>
	<div data-unitone-layout="decorator -padding:1" style="--unitone--background-color: #6b21a8; --unitone--color: #fff">amet consectetur</div>
</div>

Props

HTML -gap:{variation} / JSX gap={variation}

Gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.

<div data-unitone-layout="switcher -gap:-2">
	...
</div>

HTML -column-gap:{variation} / JSX columnGap={variation}

Column gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.

<div data-unitone-layout="switcher -column-gap:-2">
	...
</div>

HTML -row-gap:{variation} / JSX rowGap={variation}

Row gap.

Can be set from -2 to 7. For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.

<div data-unitone-layout="switcher -row-gap:-2">
	...
</div>

HTML --unitone--threshold / JSX threshold={value}

If the box size is smaller than this value, it switches to one column.

<div data-unitone-layout="switcher" style="--unitone--threshold: 500px">
	...
</div>