Spacer
スペースを確保するためのモジュールです。
構造
div.a--spacer[aria-hidden="true"]Props
| プロパティ | 説明 |
|---|---|
variant | a--spacer--{variant} クラスを出力します。 |
w | widthの値 |
h | heightの値 |
<Space>では、wとhに対してSPACEトークンの値が使えます。
Import
import { Spacer } from '@lism-ui/core';Usage
↓
<Spacer>の使用例Content…
Content…
リサイズ可能
<p>Content...</p><Spacer h="100px" /><p>Content...</p> ↓
SPACEトークンを使う例Box
Box
リサイズ可能
<p>Box</p><Spacer h='60' /><p>Box</p> ↓
横方向のスペーサーの例
Box
Box
Box
リサイズ可能
<Flex g={10}> <Box p='30' bd>Box</Box> <Spacer w='40' /> <Box p='30' bd>Box</Box> <Box p='30' bd>Box</Box></Flex>