Frame
横縦比率(aspect-ratio)や高さを指定し、内部のコンテンツをそのサイズからはみ出さないように表示できるモジュールです。
中身としては、is--frame がデフォルト付与されている<Layouter>です。
Import
import { Frame } from '@loos/lism-core';DEMO
aspect='16/9'を指定
16/9
<Frame aspect='16/9'>
<Text fw="bold">16/9</Text>
</Frame>コンテンツが長い場合
コンテンツ量が多い場合はスクロールできます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.
<Frame aspect='2/1' isFlow p='box'>
...
</Frame>コンテンツに<Center>を使用, 比率をブレイクポイントで変える
1/1 → 4/3 → 16/9
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
<Frame aspect={["1/1", "4/3", "16/9"]} p="box">
<Center size="cover" gap={20}>
<Text fw="bold">1/1 → 4/3 → 16/9</Text>
<p>...</p>
</Center>
</Frame>数値以外での比率指定
golden: 黄金比silver: 白銀比bronze: 青銅比ogp: OG Imageの比率
ratioにそれぞれ指定
aspect="golden"aspect="silver"aspect="bronze"aspect="ogp"<Frame aspect="ogp">...</Frame>
<Frame aspect="golden">...</Frame>
<Frame aspect="silver">...</Frame>
<Frame aspect="bronze">...</Frame>直下に画像を配置するケース
<Frame>直下の img, video は、Frameのサイズいっぱいに表示され、object-fit:cover が適用されます。
<img>を使用
<Frame aspect="16/9">
<img src="/img/demo-img.jpeg" alt="" width={960} height={640}/>
</Frame>nextの<Image>を使用
<Frame aspect="16/9">
<Image src="/img/demo-img.jpeg" alt="" width={960} height={640}/>
</Frame>aspectは必須ではありません
aspectを使わず、hを指定して必要な高さを固定させることも可能です。
aspectを使わず、hを指定
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.
<Frame h='12rem' isFlow p='box'>
...
</Frame>Layer系を活用する
MediaLayer & FilterLayer を使用.
2:1
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident.
<Frame aspect="2/1" c="white">
<MediaLayer src="/img/demo-img.jpeg" alt="" width='960' height='640' />
<FilterLayer blur="8px" bgc="rgba(0,0,0,0.25)" />
<Layer inset="0" p="box">
<Center data-size="cover" gap={20}>
<Text fz="4xl" fw="bold">2:1</Text>
<p>...</p>
</Center>
</Layer>
</Frame>