Layer
position:absoluteで要素を配置するためのモジュールです。
<div class="l--layer">...</div>主なProps
position: Layerの配置位置を指定します。"cover"or"{X} {Y}"形式を利用できます。- X,Yには
"left"|"right"|"top"|"bottom"|"center"|"cover"キーワードが利用できます。
size:<Layer>のサイズに関する調整を行うためのdata-size属性を出力します。"cover"または"contain"が有効です。
z:z-indexを指定します。
共通Lism Propsのinset, top, right, bottom, left を使って細かい配置を指定することも可能です。（positionの指定は内部でこれらのprops指定に変換されます）
注意点
Layerの親要素を position:relative にしておく必要があることに注意してください。
pos="relative" を指定するか、hasLayerを親コンポーネントに指定すると(.has--layerクラスを付与します）、position:relativeになります。
- Layer配置時に自動で親ブロックに
.has--layeror.-pos:rを追加するようにしたい。(Layerブロックから親要素へアクセスしてsetAtttibutes） できれば、削除されたときに親ブロックからそのクラスは削除したい。
→ 「まだ必要なのに消えてしまう」ケースも起こりうるので、削除はなし。- エディター側では 常に親要素・兄弟要素に被っていると編集ができないので、「relative モード」的なものを用意して
absoluteを一時的に解除して他のブロックの編集ができるようにしたい。 - 子ブロックとしてしか使えないようにしたい。
Import
import { Layer } from '@loos/lism-core';DEMO
positionの指定による挙動の違い
positionの指定
BG
"left top"
BG
"center top"
BG
"right top"
BG
"left center"
BG
"center"
BG
"right center"
BG
"left bottom"
BG
"center bottom"
BG
"right bottom"
<Box hasLayer py={40} bgc="pale">
<Text fz="xl" fw="bold" ta="c" opacity=".1">BG</Text>
<Layer
position={position}
bgc="hsl(268 50% 80% / 0.2)"
bd="guide"
>
<Text fz="xs" p={10} lh="1.5">...</Text>
</Layer>
</Box>positionを指定せずに使う場合
inset,t,l,... などで直接位置を指定できます。
t, l に SPACE.20 を指定
BG
Layer Contents
<Layer t={20} l={20}>
<p>Layer Contents</p>
</Layer>overflow:auto がデフォルトの挙動です。
<Layer>(.l--layer)は overflow:auto が適用されており、親要素よりコンテンツの高さが高くなる場合は縦方向にスクロール可能になります。
コンテンツが長い場合
BG
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 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.
<Layer size="cover" isFlow p='box'>
...
</Layer>sizeの指定
size="cover"の時の挙動について
inset:0 になり、<Layer> が親要素全体に覆い被さります。
size="cover"
BG
Lorem ipsum dolor sit amet.
<Box hasLayer py={40}>
...
<Layer size="cover">
<p>...</p>
</Layer>
</Box><Center>と組み合わせることで、コンテンツを中央に配置できます。
size="cover"の中に<Center>
BG
Lorem ipsum dolor sit amet.
<Box hasLayer py={40}>
...
<Layer size="cover">
<Center size="cover">
<p>...</p>
</Center>
</Layer>
</Box>size=contain の挙動について
size=containを指定すると、親のサイズを超えないようになります。（maxW, maxH に 100% 指定が入る）
size="contain"の指定なしの場合.
BG
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.
<Layer position="center" w="75%" p='box'>
...
</Layer>size="contain"の指定ありの場合
BG
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.
<Layer size="contain" position="center" w="75%" p={20}>
...
</Layer>