Spacer (a--spacer)
a--spacer is a class for reserving space between elements.
CSS
.a--spacer {
min-height: 1px;
min-width: 1px;
}Lism Component
<Spacer> is provided as an alias for <Lism atomic="spacer" aria-hidden="true" />.
Import
import { Spacer } from 'lism-css/react';HTML Structure
div.a--spacer[aria-hidden="true"]Props
In <Spacer>, SPACE token values can be used for w and h.
Usage
Basic example
↓
Usage example of
<Spacer>Content…
Content…
リサイズ可能
<p>Content...</p><Spacer h="100px" /><p>Content...</p>Using a SPACE token
↓
Using a SPACE token
Box
Box
リサイズ可能
<p>Box</p><Spacer h="60" /><p>Box</p>Horizontal spacer
↓
Horizontal spacer example
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>