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.
If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s)
If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)
<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.
If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s)
If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)
<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.
If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s)
If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)
<div data-unitone-layout="switcher -row-gap:-2">
...
</div>Revert
The way child elements are displayed is reversed.
<div data-unitone-layout="switcher -revert">
...
</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>HTML -align-items:{value} / JSX alignItems={value}
Alignment of the row direction.
start / center / end / stretch / space-between
<div data-unitone-layout="switcher -align-items:center">
...
</div>HTML -stairs-up:{value} / JSX stairsUp={value}
The direction of stairs. Default is left.
left / right
<div data-unitone-layout="switcher -stairs:1 -stairs-up:right">
...
</div>