View🔗
A View is a generic layout component.
Under the hood, it's basically a <div> element with some sensible defaults:
It supports responsive object or array values for all it's style props. Array values map according to the number of values passed:
Number of values | Responsive style |
|---|---|
| 1 | default |
| 2 | default, fromM |
| 3 | default, fromM, fromL |
| 4 | default, fromM, fromL, fromXL |
All padding and margin values are based on multiples of the baselineGrid which is 8px.
Example🔗
Hello
World
Props - View🔗
Name | Description | Type | Default Value |
|---|---|---|---|
alignContent | Sets align-content. | custom | n/a |
alignItems | Sets align-items. | custom | 'stretch' |
alignSelf | Sets align-self. | custom | n/a |
as | The HTML node that is rendered. | union(string,element,elementType,func) | 'div' |
backgroundColor | A custom background color | custom | bg |
basis | Sets flex-basis. | custom | 'auto' |
bg | A custom background color | custom | n/a |
children | A JSX node | node | n/a |
className | Adds a custom CSS class. | string | n/a |
direction | Sets the flex-direction. | custom | 'column' |
display | Sets display. | custom | 'flex' |
extend | Extends the Fela style object. | union(object,func,array) | n/a |
flex | Sets flex. | custom | n/a |
grow | Sets flex-grow. | custom | 0 |
height | Sets height. | custom | n/a |
justifyContent | Sets justify-content. | custom | n/a |
margin | Adds margin based on the baselineGrid. Overwritten by specific directional margins. | custom | n/a |
marginBottom | Adds bottom margin based on the baselineGrid. | custom | n/a |
marginLeft | Adds left margin based on the baselineGrid. | custom | n/a |
marginRight | Adds right margin based on the baselineGrid. | custom | n/a |
marginTop | Adds top margin based on the baselineGrid. | custom | n/a |
maxHeight | Sets max-height. | custom | n/a |
maxWidth | Sets max-width. | custom | n/a |
minHeight | Sets min-height. | custom | n/a |
minWidth | Sets min-width. | custom | n/a |
order | Sets order. | custom | n/a |
padding | Adds padding based on the baselineGrid. Overwritten by specific directional paddings. | custom | n/a |
paddingBottom | Adds bottom padding based on the baselineGrid. | custom | n/a |
paddingLeft | Adds left padding based on the baselineGrid. | custom | n/a |
paddingRight | Adds right padding based on the baselineGrid. | custom | n/a |
paddingTop | Adds top padding based on the baselineGrid. | custom | n/a |
shrink | Sets flex-shrink. | custom | 0 |
spacing | Adds spacing between children based on the baselineGrid. | custom | n/a |
style | Adds inline styles. | object | n/a |
width | Sets width. | custom | n/a |
wrap | Sets flex-wrap. | custom | 'nowrap' |