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 -3 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 -3 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 -3 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 / baseline
<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 / 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>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>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>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>HTML -container-type:{value} / JSX containerType={value}
Establishes the Switcher as a query container for its descendants.
Currently supported values are:
inline-size
<div data-unitone-layout="switcher -container-type:inline-size">
<div>...</div>
</div>HTML -responsive-context:{value} / JSX responsiveContext={value}
Sets the responsive context for descendants to container, the only supported value. It does not affect the Switcher element itself.
Use responsiveContext="container" together with containerType="inline-size" on this element (HTML: -responsive-context:container -container-type:inline-size). The default is viewport-based behavior, and there is no viewport override inside a container context. The context becomes active only when both markers are on the same element. If containerType="inline-size" is omitted, responsiveContext="container" is ignored and the existing responsive context remains active. See Responsive context utilities for examples.
Deprecated HTML -fluid-reference:{value} / JSX fluidReference={value}
Deprecated. Use responsiveContext="container" on an ancestor instead.
Uses a query container’s inline size as the reference for fluid typography, spacing, padding, and gutters.
Currently supported values are:
cqw
Place the Switcher inside an ancestor with container-type: inline-size.
<div data-unitone-layout="switcher -container-type:inline-size">
<div data-unitone-layout="switcher -fluid-reference:cqw">
...
</div>
</div>