Spacer Edit
Spacer
is a primitive layout component that providers inner (padding
) or outer (margin
) space in-between components. It can also be used to adaptively provide space within an HStack
or VStack
.
Table of contents Table of contents
Usage Usage
Spacer
comes with a bunch of shorthand props to adjust margin
and padding
. The values of these props work as a multiplier to the library’s grid system (base of 4px
).
import { __experimentalSpacer as Spacer, __experimentalHeading as Heading, __experimentalView as View, } from '@wordpress/components'; function Example() { return ( <View> <Spacer> <Heading>WordPress.org</Heading> </Spacer> <Text>Code is Poetry</Text> </View> ); }
Props Props
margin
: number
margin
: number
Adjusts all margins.
- Required: No
marginY
: number
marginY
: number
Adjusts top and bottom margins, potentially overriding the value from the more generic margin
prop.
- Required: No
marginX
: number
marginX
: number
Adjusts left and right margins, potentially overriding the value from the more generic margin
prop.
- Required: No
marginTop
: number
marginTop
: number
Adjusts top margin, potentially overriding the value from the more generic margin
and marginY
props.
- Required: No
marginBottom
: number
marginBottom
: number
Adjusts bottom margin, potentially overriding the value from the more generic margin
and marginY
props.
- Required: No
- Default:
2
marginLeft
: number
marginLeft
: number
Adjusts left margin, potentially overriding the value from the more generic margin
and marginX
props.
- Required: No
marginRight
: number
marginRight
: number
Adjusts right margin, potentially overriding the value from the more generic margin
and marginX
props.
- Required: No
padding
: number
padding
: number
Adjusts all padding.
- Required: No
paddingY
: number
paddingY
: number
Adjusts top and bottom padding, potentially overriding the value from the more generic padding
prop.
- Required: No
paddingX
: number
paddingX
: number
Adjusts left and right padding, potentially overriding the value from the more generic padding
prop.
- Required: No
paddingTop
: number
paddingTop
: number
Adjusts top padding, potentially overriding the value from the more generic padding
and paddingY
props.
- Required: No
paddingBottom
: number
paddingBottom
: number
Adjusts bottom padding, potentially overriding the value from the more generic padding
and paddingY
props.
- Required: No
paddingLeft
: number
paddingLeft
: number
Adjusts left padding, potentially overriding the value from the more generic padding
and paddingX
props.
- Required: No
paddingRight
: number
paddingRight
: number
Adjusts right padding, potentially overriding the value from the more generic padding
and paddingX
props.
- Required: No