Reel

コンテンツを横スクロールで表示するコンポーネントです。

対応するHTML構造

<div class="l--reel">
	<div class="is--item">...</div>
	<div class="is--item">...</div>
	<div class="is--item">...</div>
</div>

Props

itemBasis: 各アイテムのサイズを指定できます。
unreel: 横スクロールを解除するブレイクポイントを指定できます。（sm, mdを標準ではサポートしています)

検討事項MEMO

scroll-snap-alignあたりの設定
スクロール可能であることを視覚的に表示する機能をつける？(端にシャドウ)
ブロック化した時
- 子要素はBox or 画像・動画だけにする？
- もしくは、専用の子ブロック（BOX拡張）のみにするか

Import

import { Reel } from '@loos/lism-core';

DEMO

<Reel>デフォルト

Content

リサイズ可能エリアです ↑

<Reel>
	<Box>...</Box>
	<Box>...</Box>
	...
</Reel>

itemBasisで子要素の横幅を指定する

リサイズ可能エリアです ↑

<Reel itemBasis="40%" gap={20}>
	<Frame ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	...
</Reel>

snap="center"

リサイズ可能エリアです ↑

<Reel itemBasis="40%" snap="center" gap={20}>
	<Frame ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	...
</Reel>

ボタンナビゲーションをつける（idつけてアンカーリンク用意するだけ）

1 2 3 4 5 6

<Reel itemBasis="40%" snap="center" gap={20}>
	<Frame id="image-1" ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame id="image-2" ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame id="image-3" ascpect="16/9">
		<img src="..." alt="" loading="lazy" width={960} height={640} />
	</Frame>
	...
</Reel>
<Cluster gap={20} jc="c" lh="1" provide={{c: 'base', bgc:'b200', p:'box:s', radius: '2'}}>
	<Item tag="a" href="#image-1" consume='c bgc p radius' hover={{bgc: "b300"}} td="none">1</Item>
	<Item tag="a" href="#image-2" consume='c bgc p radius' hover={{bgc: "b300"}} td="none">2</Item>
	<Item tag="a" href="#image-3" consume='c bgc p radius' hover={{bgc: "b300"}} td="none">3</Item>
	...
</Cluster>

direction="vertical"

リサイズ可能エリアです ↑

<Reel itemBasis="auto" direction="column" snap="center" aspect="3/4.5" radius="4" bgc="b900" p={30} gap={30}>
	<Frame aspect="3/4" radius="3">
		<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame aspect="3/4" radius="3">
		<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame aspect="3/4" radius="3">
		<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
	</Frame>
	<Frame aspect="3/4" radius="3">
		<img src="/img/demo-img.jpeg" alt="" loading="lazy" width={960} height={640} />
	</Frame>
</Reel>

小さい画面サイズでのみReelにする

unreelでブレイクポイントを指定(sm, mdを標準ではサポートしています)することで、そのポイントを超えるとReelではなく、<TileGrid>と同じようなレイアウトに切り替わります。

flexからgridに切り替わるので、gridプロパティ(grid-template-columnsなど)を指定して、レイアウトを調整することもできます。(Reel時にgrid用のプロパティは影響しない)

@mdでReel解除

Content

リサイズ可能エリアです ↑

<Reel unreel='md' gap={20}>
	...
</Reel>

@smでReel解除

Content

リサイズ可能エリアです ↑

<Reel unreel='sm' gap={20}>
	...
</Reel>

@smでReel解除, grid時、2:3の比率でコンテンツを表示

Content

リサイズ可能エリアです ↑

<Reel unreel='sm' gap={20} grid={{columns: '2fr 3fr'}}>
	...
</Reel>

SwitchFix Layer