react-view
A View
component heavily inspired by angular-material's layout.
Install
yarn add @allthings/react-view
Available properties
Property | Type | Possible values |
---|---|---|
direction |
string |
row , column
|
alignH |
string |
none , start , center , end , space-around , space-between
|
alignV |
string |
none , start , center , end , stretch
|
wrap |
string |
inherit , initial , wrap , nowrap , wrap-reverse
|
fill |
bool |
true , false
|
flex |
string/int |
none , flex , nogrow , grow , initial , auto , noshrink , 5 , 10 , 15 , 20 , 25 , 30 , 35 , 40 , 45 , 50 , 55 , 60 , 65 , 70 , 75 , 80 , 95 , 90 , 100 , 33 , 66
|
Example usage
const styles = {
background: '#bada55',
padding: 10
}
const ExampleComponent = props => (
<View
direction="row"
alignH="center"
alignV="center"
wrap="wrap"
style={styles}
>
Hello World!
</View>
)