Spacer
スペースを確保するためのモジュールです。
対応するHTML構造
<div class="e--spacer">...</div>Props
w:widthの値を指定できます。h:heightの値を指定できます。
<Space>では、wとhに対してSPACEトークンの値が使えます。
Import
import { Spacer } from '@loos/lism-core';DEMO
<Spacer>の使用例Box
Box
Box
リサイズ可能エリアです ↑
<Box bgc="pale">Box</Box>
<Spacer h="100px" />
<Box bgc="pale">Box</Box>
<Spacer h={["50px", "100px"]} />
<Box bgc="pale">Box</Box>hにSPACEトークンを使う例Box
Box
Box
リサイズ可能エリアです ↑
<Box bgc="pale">Box</Box>
<Spacer h={50} />
<Box bgc="pale">Box</Box>
<Spacer h={[30, 50]} />
<Box bgc="pale">Box</Box><Spacer>の使用例Box
Box
Box
リサイズ可能エリアです ↑
<Flex>
<Box bgc="pale">Box</Box>
<Spacer w="40px" />
<Box bgc="pale">Box</Box>
<Spacer w={["40px", "60px"]} />
<Box bgc="pale">Box</Box>
</Flex>wにSPACEトークンを使う例Box
Box
Box
リサイズ可能エリアです ↑
<Flex>
<Box bgc="pale">Box</Box>
<Spacer w={50} />
<Box bgc="pale">Box</Box>
<Spacer w={[30, 50]} />
<Box bgc="pale">Box</Box>
</Flex>