1.3.0 • Published 4 months ago
@illa-design/grid v1.3.0
Grid
Grid is used to create consistent page structures and responsive page layouts.
Installation
yarn add @illa-design/grid
Import components
import { Row, Col } from "@illa-dedign/grid"
API
Row Basic Properties
Props | Desc | Type | Default |
---|---|---|---|
horizontalGap | the size of the horizontal interval betweent grids, could be a string or an object like { xs: "4px", sm: "8px", md: "12px"} | string | GridSize | "0px" |
verticallGap | The size of the vertical interval betweent grids, could be a string or an object like { xs: "4px", sm: "8px", md: "12px"} | string | GridSize | "0px" |
align | Vertical alignment | "start" | "center" | "end" | "stretch" | "start" |
justify | Horizontal alignment | "start" | "center" | "end" | "space-around" | "space-between" | "start" |
Col Basic Properties
Props | Desc | Type | Default |
---|---|---|---|
span | Raster number of cells to occupy | number | 24 |
offset | The number of cells to offset Col from the left | number | 0 |
order | Raster order | number | - |
push | Move the raster to right | number | - |
pull | Move the raster to rleft | number | - |
xs | Responsive configuration when screen< 576px | number | { key: string: any } | - |
sm | Responsive configuration when screen>= 576px | number | { key: string: any } | - |
md | Responsive configuration when screen>= 768px | number | { key: string: any } | - |
lg | Responsive configuration when screen>= 992px | number | { key: string: any } | - |
xl | Responsive configuration when screen>= 1200px | number | { key: string: any } | - |
xxl | Responsive configuration when screen>= 1600px | number | { key: string: any } | - |
Example
Basic usage
<Row>
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1-span-8
</div>
</Col>
<Col span={16}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2-span-16
</div>
</Col>
</Row>
Set offset of Col
<Row>
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1-span-8
</div>
</Col>
<Col span={8} offset={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2-offset-8
</div>
</Col>
</Row>
Set interval of Grid
<Row horizontalGap="24px" verticalGap="24px">
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1-span-8
</div>
</Col>
<Col span={16}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2-span-16
</div>
</Col>
</Row>
Set horizontal and vertical layout
<Row justify="center" align="end">
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "50px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1-span-8
</div>
</Col>
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2-span-8
</div>
</Col>
</Row>
Set order of Col
<Row>
<Col span={8}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1-order-2
</div>
</Col>
<Col span={16}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2-order-1
</div>
</Col>
</Row>
Set responsive layout
<Row>
<Col xs={4} sm={8} md={12} lg={16} xl={20}>
<div
style={{
borderRadius: "6px",
height: "50px",
backgroundColor: globalColor(`--${illaPrefix}-blue-02`),
color: "white",
}}
>
Col-1
</div>
</Col>
<Col xs={20} sm={16} md={12} lg={8} xl={4}>
<div
style={{
borderRadius: "6px",
height: "80px",
backgroundColor: globalColor(`--${illaPrefix}-blue-06`),
color: "white",
}}
>
Col-2
</div>
</Col>
</Row>
1.2.0
4 months ago
1.3.0
4 months ago
1.0.29
10 months ago
1.0.28
10 months ago
1.0.27
10 months ago
1.0.30
9 months ago
1.1.0
8 months ago
1.0.22
12 months ago
1.0.21
12 months ago
1.0.26
11 months ago
1.0.25
11 months ago
1.0.24
12 months ago
1.0.23
12 months ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.20
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago