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

Lorem ipsum

dolor sit

amet consectetur


<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>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher gap={-2}>
	...
</Switcher>

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

Column gap.


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


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher columnGap={-2}>
	...
</Switcher>

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

Row gap.


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


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher rowGap={-2}>
	...
</Switcher>

Revert

The way child elements are displayed is reversed.


<div data-unitone-layout="switcher -revert">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher revert>
	...
</Switcher>

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>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher threshold="500px">
	...
</Switcher>

HTML -align-items:{value} / JSX alignItems={value}

Alignment of the row direction.

start / center / end / stretch / baseline


<div data-unitone-layout="switcher -align-items:center">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher alignItems="center">
	...
</Switcher>

HTML -stairs-up:{value} / JSX stairsUp={value}

The direction of stairs. Default is left.

left / right / up-down / down-up

left


<div data-unitone-layout="switcher -stairs:1 -stairs-up:left" style="--unitone--threshold: 200px">
	...
</div>
 
<div data-unitone-layout="switcher -stairs:1 -stairs-up:left -revert" style="--unitone--threshold: 200px">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher stairs={1} stairsUp="left" threshold="200px">
	...
</Switcher>
 
<Switcher stairs={1} stairsUp="left" threshold="200px" revert>
	...
</Switcher>

right


<div data-unitone-layout="switcher -stairs:1 -stairs-up:right" style="--unitone--threshold: 200px">
	...
</div>
 
<div data-unitone-layout="switcher -stairs:1 -stairs-up:right -revert" style="--unitone--threshold: 200px">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher stairs={1} stairsUp="right" threshold="200px">
	...
</Switcher>
 
<Switcher stairs={1} stairsUp="right" threshold="200px" revert>
	...
</Switcher>

up-down


<div data-unitone-layout="switcher -stairs:1 -stairs-up:up-down" style="--unitone--threshold: 200px">
	...
</div>
 
<div data-unitone-layout="switcher -stairs:1 -stairs-up:up-down -revert" style="--unitone--threshold: 200px">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher stairs={1} stairsUp="up-down" threshold="200px">
	...
</Switcher>
 
<Switcher stairs={1} stairsUp="up-down" threshold="200px" revert>
	...
</Switcher>

down-up


<div data-unitone-layout="switcher -stairs:1 -stairs-up:down-up" style="--unitone--threshold: 200px">
	...
</div>
 
<div data-unitone-layout="switcher -stairs:1 -stairs-up:down-up -revert" style="--unitone--threshold: 200px">
	...
</div>


import { Switcher } from '@inc2734/unitone-css';
 
<Switcher stairs={1} stairsUp="down-up" threshold="200px">
	...
</Switcher>
 
<Switcher stairs={1} stairsUp="down-up" threshold="200px" revert>
	...
</Switcher>