Cluster

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

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

対応するHTML構造

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

Props

itemMinW: 子要素の最低限維持する幅
delimiterColor: 内部に配置した<Delimiter />の色を指定できます。
その他、<Flex>で使えるpropsが使えます。
- gapに初期値20が指定されています。

Import

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

DEMO

シンプルな<Cluster>の例

Lorem ipsumDolorSit ametConsecteturAdipisicingElit

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

<Cluster gap={20}>
	<Badge>Lorem ipsum</Badge>
	<Badge>Dolor</Badge>
	<Badge>Sit amet</Badge>
	<Badge>Consectetur</Badge>
	<Badge>Adipisicing</Badge>
	<Badge>Elit</Badge>
</Cluster>

itemMinWを指定

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

<Cluster gap={20} itemMinW="20%" ta="center">
	<Box bd>A</Box>
	<Box bd>B</Box>
	<Box bd>C</Box>
</Cluster>

他のpropsの活用

Lorem ipsum

Dolor

Sit amet

Consectetur

Adipisicing

Elit

Lorem ipsumDolorSit ametConsecteturAdipisicingElit

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

<Cluster itemMinW="5em" hasDivider="I" jc="center" ta="center" provide={{p: '0 20'}}>
	<Box consume='p'>Lorem ipsum</Box>
	<Box consume='p'>Dolor</Box>
	<Box consume='p'>Sit amet</Box>
	<Box consume='p'>Consectetur</Box>
	<Box consume='p'>Adipisicing</Box>
	<Box consume='p'>Elit</Box>
</Cluster>
<hr />
<Cluster itemMinW="3em" gap={{row:0}} clmg={20} ta="center" delimiterColor='accent'>
	<span >Lorem ipsum</span>
	<Delimiter>/</Delimiter>
	<span >Dolor</span>
	<Delimiter>/</Delimiter>
	<span >Sit amet</span>
	<Delimiter>/</Delimiter>
	<span >Consectetur</span>
	<Delimiter>/</Delimiter>
	<span >Adipisicing</span>
	<Delimiter>/</Delimiter>
	<span >Elit</span>
</Cluster>

Flex Stack