With Sidebar

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

Usage

Lorem ipsum dolor sit amet

Lorem
ipsum
dolor


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar sidebar="left">
	...
</WithSidebar>

Revert

The way child elements are displayed is reversed.


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


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

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>


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

Sidebar width

Sidebar width.


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar sidebarWidth="200px">
	...
</WithSidebar>

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


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

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

Column gap.


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


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

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

Row gap.


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


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

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

Alignment of the row direction.

start / center / end / stretch / baseline


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


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

HTML -overflow:{value} / JSX overflow={value}

Overflow.

visible / hidden / scroll / auto / clip


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar overflow="hidden">
	...
</WithSidebar>

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

stripe


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar divider="stripe">
	...
</WithSidebar>

divide


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar divider="divide">
	...
</WithSidebar>

Slash


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar divider="slash">
	...
</WithSidebar>

bordered


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


import { WithSidebar } from '@inc2734/unitone-css';
 
<WithSidebar divider="bordered">
	...
</WithSidebar>