Stack

複数の要素をFlexレイアウトで縦並びに配置するためのコンポーネントです。

flex-direction:columnがデフォルトで適用されている<Flex>ベースのコンポーネントで、<Flex direction="column">と機能的には同等です。

対応するHTML構造

<div class="l--stack">...</div>

Props

<Flex>で使えるpropsが使えます。

Import

import { Stack } from '@loos/lism-core';

DEMO

シンプルな<Stack>の例

コンテンツ

リサイズ可能エリアです ↑

<Stack gap={20}>
	<p>...</p>
	<p>...</p>
	<p>...</p>
</Stack>

例2

Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit fugit, numquamdictarepellat ipsa autem eos iure ducimus consequatur vel.

リサイズ可能エリアです ↑

<Stack gap={30} p='box:l' bgc='pale' shadow="2">
	<h3>Heading</h3>
	<p>...</p>
</Stack>

Stackを活用したセンター寄せレイアウト

<Stack ai="center">( .l--stack.-ai:c )の組み合わせで、Every Layout で言うところの "内在的な中央寄せ" （コンテンツが短い時だけ中央寄せ）にできます。

内在的な中央寄せ

見出し

Lorem ipsum dolor sit amet.

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.

リサイズ可能エリアです ↑

<Stack ai="center" gap={30} p={40}>
	<h3>見出し</h3>
	<p>...</p>
	<p>...</p>
</Stack>

Cluster Center