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>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="reel -gap:-2">
...
</div>HTML --unitone--height / JSX height={value}
Height.
<div data-unitone-layout="reel" style="--unitone--height: 250px">
...
</div>HTML --unitone--item-width / JSX itemWidth={value}
width of the items.
<div data-unitone-layout="reel" style="--unitone--item-width: 250px">
...
</div>