MediaLayer
メディア（画像・動画）を親要素サイズに合わせて配置するための、<Layer>の拡張モジュール。
対応するHTML構造
<div class="l--layer l--layer--media">...</div>Props
media: メディア用のHTMLタグ、またはコンポーネントを指定できます。デフォルトは'img'です。- 以下のメディア用Attrsは自動でメディア側へ振り分けられます。
src,width,height,alt,loading,decodingloop,muted,controls,autoplay,playsinline,posterhoverobjectFitobjectPosition
mediaProps:src等の自動で振り分けされる属性以外もmediaに対して何か指定したい場合は、mediaPropsにオブジェクトで指定してください。
ただし、childrenでメディアを渡す場合、これらは全て無視されます。
Import
import { MediaLayer } from '@loos/lism-core';DEMO
MediaLayerに直接メディアデータを渡す場合、自動でobject-fitにcoverが指定されます。
MediaLayerに画像用のpropsを指定する
リサイズ可能エリアです ↑
<Frame h="200px">
<MediaLayer src="/img/demo-img.jpeg" alt="" width='960' height='640' />
</Frame>childrenでメディアを渡す
childrenでメディアを渡す場合は、object-fitの自動付与はされません。
例
リサイズ可能エリアです ↑
<Frame aspect="cinema" bgc="#fff" shadow='2'>
<MediaLayer p={10}>
<Media src="/img/demo-img.jpeg" alt="" width={960} height={640} objectFit="cover" />
</MediaLayer>
</Frame>next/imageを使う例
リサイズ可能エリアです ↑
<Frame aspect="cinema">
<MediaLayer media={Image} src="/img/demo-img.jpeg" alt="" width='960' height='640' />
</Frame>画像の上にコンテンツを重ねる例
MediaLayerをz="-1"でコンテンツの下へ
Lorem ipsum dolor sit amet.
リサイズ可能エリアです ↑
<Frame aspect="cinema">
<MediaLayer z="-1" src="/img/demo-img.jpeg" alt="" width='960' height='640' />
<FilterLayer z="-1" bgc="black:.4" />
<Center size="cover" c="white" gap="20" p="box">
<p>...</p>
</Center>
</Frame>コンテンツもLayerで囲む
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.
リサイズ可能エリアです ↑
<Frame aspect="cinema">
<MediaLayer src="/img/demo-img.jpeg" alt="" width='960' height='640' />
<FilterLayer bgc="black:.4" />
<Layer inset="0">
<Center size="cover" c="white" gap="20" p="box">
<DammyText length="l" />
</Center>
</Layer>
</Frame>