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

Layer

.is--layerをデフォルトで出力するコンポーネント(<Lism isLayer>のエイリアス）です。

要素を単純にposition:absoluteで配置したいだけの場合は、-pos:aクラスなどを使用することもできます。 参考：absoluteで配置する方法

Props

プロパティ説明
layout展開したい Lismコンポーネント を指定できます。
blur,contrast,brightness,grayscale,hueRotate,invert,saturate,sepiaこれらをまとめて css.backdropFilter に受け渡します。

Import

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

Usage

↓
使用例

BACKGROUND

Layer Contents…

リサイズ可能 
<Box pos='r' py='40'>
  <Text fz='2xl' fw='bold' ta='c' lts='l' op='0.2'>BACKGROUND</Text>
  <Layer p='20' bd bds='dashed' bgc='purple:10%'>
    <p>Layer Contents...</p>
  </Layer>
</Box>

backdropFilterの活用

Lismコンポーネントでは、css.backdropFilter に指定した値をbackdrop-filterとしてインラインスタイルを出力できるようになっていますが、<Layer>コンポーネントでは、この機能をより活用しやすいようになっています。

↓
背景にブラーをかける

BACKGROUND

リサイズ可能 
<Box pos='r' p='40'>
  <Text fz='2xl' fw='bold' ta='c'>BACKGROUND</Text>
  <Layer blur='3px' />
</Box>
↓
背景の色味を変える

Photo by xxxxxx

リサイズ可能 
<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer brightness={1.2} contrast={0.8} grayscale={1}/>
  <Text pos='a' b='0' r='0' p='20' lh='1' c='white' fz='xs' op='0.7'>Photo by xxxxxx</Text>
</Frame>
<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer contrast='1.2' sepia='25%' />
</Frame>
<Frame ar='2/1' pos='r'>
  <img src='/img.jpg' alt='' width='960' height='640' />
  <Layer mis='auto' invert='1' grayscale='20%' w='50%' />
</Frame>

メディアレイヤー

.is--layerを使ってコンテンツの背景に画像を配置するようなレイアウトを組んでみます。

↓
例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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.

リサイズ可能 
<Box hasGutter pos='r' py='50'>
  <Frame isLayer>
    <Media src="/img/img-3.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  </Frame>
  <Layer bgc='black' op='0.5' />
  <Stack pos='r'g='40' c='white'>
    <Dummy/>
    <Dummy length='l' />
  </Stack>
</Box>

↓これでも同じことができます。

↓
例

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

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 hasGutter pos='r' py='50'>
  <Media isLayer src="/img/img-3.jpg" alt="" width='960' height='640' loading='lazy' decoding='async' />
  <Layer bgc='black' op='0.5' />
  <Stack pos='r' g='40' c='white'>
    <Dummy/>
    <Dummy length='l' />
  </Stack>
</Frame>