Spacer (a--spacer)
a--spacerは、要素間のスペースを確保するためのクラスです。
CSS
.a--spacer {
min-height: 1px;
min-width: 1px;
}Lismコンポーネント
<Lism atomic="spacer" aria-hidden="true" />のエイリアスとして、<Spacer>を用意しています。
Import
import { Spacer } from 'lism-css/react';出力されるHTML構造
div.a--spacer[aria-hidden="true"]専用Props
<Spacer>では、wとhに対してSPACEトークンの値が使えます。
Usage
基本例
↓
<Spacer>の使用例Content…
Content…
リサイズ
<p>Content...</p><Spacer h="100px" /><p>Content...</p>SPACEトークンを使う例
↓
SPACEトークンを使う例Box
Box
リサイズ
<p>Box</p><Spacer h="60" /><p>Box</p>横方向のスペーサー
↓
横方向のスペーサーの例
Box
Box
Box
リサイズ
<Flex g="10"> <Box p="20" bd> Box </Box> <Spacer w="40" /> <Box p="20" bd> Box </Box> <Box p="20" bd> Box </Box></Flex>