Inline
A utility component for controlling horizontal layouts.
Features
- Control the space between children.
- Control the alignment of children.
- Adheres to our spacing tokens.
Basic usage
First, import the component.
import {Inline} from '@pleo-io/telescope'
Then use it, like so:
API reference
The component accepts the following props.
| Prop | Type | Default |
|---|---|---|
align | string | |
alignX | enum | |
alignY | enum | |
m | enum | |
margin | enum | |
marginBottom | enum | |
marginLeft | enum | |
marginRight | enum | |
marginTop | enum | |
marginX | enum | |
marginY | enum | |
mb | enum | |
ml | enum | |
mr | enum | |
mt | enum | |
mx | enum | |
my | enum | |
p | enum | |
padding | enum | |
paddingBottom | enum | |
paddingLeft | enum | |
paddingRight | enum | |
paddingTop | enum | |
paddingX | enum | |
paddingY | enum | |
pb | enum | |
pl | enum | |
pr | enum | |
pt | enum | |
px | enum | |
py | enum | |
space | enum | |
stretchChildren | boolean | |
wrap | boolean |
This component also accepts the following styled system props:
| Prop | Type | Default |
|---|---|---|
alignContent | enum | |
alignItems | enum | |
alignSelf | enum | |
flex | enum | |
flexBasis | enum | |
flexDirection | enum | |
flexGrow | enum | |
flexShrink | enum | |
flexWrap | enum | |
justifyContent | enum | |
justifyItems | enum | |
justifySelf | enum | |
order | enum |