With Sidebar

Assemble the component with sidebars. If the configured width can no longer be maintained, a single column display will be used.

Usage

<div data-unitone-layout="with-sidebar">
	<p>Lorem ipsum dolor sit amet</p>
	<ul>
		<li>Lorem</li>
		<li>ipsum</li>
		<li>dolor</li>
	</ul>
</div>

Props

Sidebar

Sets sidebar position. Default is right.

left / right

<div data-unitone-layout="with-sidebar -sidebar:left">
	...
</div>

Revert

The way child elements are displayed is reversed.

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

Content min width

Minimum width of the main column. If this width cannot be maintained, it will be reduced to one column.

<div data-unitone-layout="with-sidebar" style="--unitone--content-min-width: 500px">
	...
</div>

Sidebar width

Sidebar width.

<div data-unitone-layout="with-sidebar" style="--unitone--sidebar-width: 200px">
	...
</div>

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="with-sidebar -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="with-sidebar -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="with-sidebar -row-gap:-2">
	...
</div>

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

Alignment of the row direction.

start / center / end / stretch / space-between

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