Delimiter

テキストレベルの小さな要素を区切るための要素。

対応するHTML構造

<div class="e--delimiter">...</div>

デフォルトで等幅フォントが適用されるため、記号でデータを区切る際に便利になっています。

Props

Import

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

DEMO

Delimiterの例

Lorem ipsumDolorSit ametConsectetur

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

<Box>
	<span>Lorem ipsum</span>
	<Delimiter> / </Delimiter>
	<span>Dolor</span>
	<Delimiter> / </Delimiter>
	<span>Sit amet</span>
	<Delimiter> / </Delimiter>
	<span>Consectetur</span>
</Box>

Clusterからはデリミタのカラーを一括で変更可能

Lorem ipsumDolorSit ametConsecteturAdipisicingElit

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

<Cluster
	delimiterColor='accent'
	columnGap={20}
>
	<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>

Avatar Divider