0.0.1 • Published 3 years ago
infra-view v0.0.1
infra-view
Create your UI in a simple way.
Installation
npm install infra-view
yarn add infra-view
pnpm add infra-view
Components
Base
View
Try to use full spellings instead of abbreviations, which will reduce the mental burden when developing. And we provide intelligent completions, so the time spent using abbreviations and full spellings is not too different.
import { View } from 'infra-view'
<View
display='block'
margin={100}
width={20}
height={20}
background='black'
hover={{
background='red'
}}
md={{
margin: 200,
width: 30,
height: 30,
}}
lg={{
margin: 300,
width: 30,
height: 30,
}}>
UI
</View>
https://github.com/infra-design/view
Layout
We recommend to use Layout
components to create your layout without direct use of View
component.
Flex
import { Flex } from 'infra-view'
export default () => {
return (
<Flex
alignItems='center'
justifyContent='space-between'
flexDirection='row'
md={{
flexDirection: 'column',
}}>
<div>1</div>
<div>2</div>
</Flex>
)
}
Grid
import { Grid } from 'infra-view'
export default () => {
return (
<Grid
columns={1}
gap={20}
md={{ columns: 2, gap: 30 }}
lg={{ columns: 3, gap: 40 }}>
<div>1</div>
</Grid>
)
}
Center
import { Center } from 'infra-view'
export default () => {
return (
<Center width={20} height={20}>
<div>UI</div>
</Center>
)
}
0.0.1
3 years ago