Reel

Displays child elements in a simple horizontal scroll.

Usage


<div data-unitone-layout="reel">
	<img src="https://placehold.jp/400x300.jpg" alt="" />
	<img src="https://placehold.jp/400x300.jpg" alt="" />
	<img src="https://placehold.jp/400x300.jpg" alt="" />
</div>

Props

HTML -no-bar / JSX noBar

Hide bar.


<div data-unitone-layout="reel -no-bar">
	...
</div>


import { Reel } from '@inc2734/unitone-css';
 
<Reel noBar>
	...
</Reel>

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


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

HTML —unitone—height / JSX height={value}

Height.


<div data-unitone-layout="reel" style="--unitone--height: 250px">
	...
</div>


import { Reel } from '@inc2734/unitone-css';
 
<Reel height="250px">
	...
</Reel>

HTML —unitone—item-width / JSX itemWidth={value}

width of the items.


<div data-unitone-layout="reel" style="--unitone--item-width: 250px">
	...
</div>


import { Reel } from '@inc2734/unitone-css';
 
<Reel itemWidth="250px">
	...
</Reel>