コンテンツにスキップ
Lism UI

Reel

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

Import

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

Props

プロパティ出力説明
itemSize--item-size子要素のサイズ（flex-basisの値)を指定できます。
snapType--snapTypescroll-snap-type の値
snapAlign--snapAlign子要素に適用する scroll-snap-align の値
snapStop--snapStop子要素に適用する scroll-snap-stop の値
unreel.-d@{bp}.-gtc@{bp}横スクロールを解除するブレイクポイントを指定できます。

Usage

↓

<Reel>デフォルト

Box

Box

Box

Box

Box

Box

リサイズ可能 
<Reel g='10'>
  <Box p='40' bgc='base-2'>Box</Box>
  <Box p='40' bgc='base-2'>Box</Box>
  ...
</Reel>
↓

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

リサイズ可能 
<Reel itemSize="45%" g='20'>
  <img src='...' alt='' width='960' height='640' />
  <img src='...' alt='' width='960' height='640' />
  ...
</Reel>
↓

snapAlign="center"

リサイズ可能 
<Reel itemSize="45%" snapAlign="center" g='20'>
  <img src='...' alt='' width='960' height='640' />
  <img src='...' alt='' width='960' height='640' />
  ...
</Reel>

ナビゲーションをつける

reel要素にidを付けてアンカーリンク用意すると、ナビゲーションになります。

↓

ボタンナビゲーションをつける

1 2 3 4 5 6 
<Reel itemSize='40%' snapAlign='center' g='20'>
  <Frame id='image-1' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame id='image-2' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame id='image-3' ar='16/9'>
    <img src='...' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  ...
</Reel>
<Flex g='20' jc='c' lh='1' mbs='20'>
  <Lism tag='a' href='#image-1' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>1</Lism>
  <Lism tag='a' href='#image-2' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>2</Lism>
  <Lism tag='a' href='#image-3' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>3</Lism>
  <Lism tag='a' href='#image-4' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>4</Lism>
  <Lism tag='a' href='#image-5' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>5</Lism>
  <Lism tag='a' href='#image-6' c='inherit' bgc='base-2' w='2em' h='2em' ta='c' ac='c' bdrs='2' td='none' hov='fade'>6</Lism>
</Flex>

縦向きのリール

↓
fxd='column'で縦方向に
リサイズ可能 
<Reel fxd='column' itemSize='auto' ar='3/4.5' bdrs='4' bgc='black' p={30} g={30}>
  <Frame ar='3/4' bdrs='3'>
    <img src='/img.jpg' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  <Frame ar='3/4' bdrs='3'>
    <img src='/img.jpg' alt='' loading='lazy' width='960' height='640' />
  </Frame>
  ...
</Reel>

大きい画面サイズでReelを解除する

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

↓
@mdでReel解除
リサイズ可能 
<Reel unreel='md' g='20'>
  ...
</Reel>
↓
@smでReel解除, itemSize 指定あり
リサイズ可能 
<Reel unreel='sm' g='20'>
  ...
</Reel>

unreelを使わずに手動で各種プロパティを記述して細かく調整することもできます。

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

Box

Box

Box

Box

Box

Box

リサイズ可能 
<Reel g='20' d={[null, 'grid']} gtc={[null,'2fr 3fr']}>
  ...
</Reel>