Skip to content

Commit 6084acc

Browse files
D-LiteD-Lite
authored
Simplegrid component (#47)
* feat: simple grid component documentation * refactor: change name casing simplegrid * refactor: change name casing simplegrid
1 parent 5199766 commit 6084acc

File tree

5 files changed

+127
-0
lines changed

5 files changed

+127
-0
lines changed

‎components/content/examples/simplegrid/SimpleGridAutoResponsive.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<CSimpleGrid min-child-width="120px" spacing="40px">
3+
<CBox background="green" height="80px"></CBox>
4+
<CBox background="red" height="80px"></CBox>
5+
<CBox background="blue.900" height="80px"></CBox>
6+
<CBox background="darkorange" height="80px"></CBox>
7+
<CBox background="yellow" height="80px"></CBox>
8+
</CSimpleGrid>
9+
</template>

‎components/content/examples/simplegrid/SimpleGridExample.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<CSimpleGrid :columns="2" :spacing="10">
3+
<CBox background="green" height="80px"></CBox>
4+
<CBox background="red" height="80px"></CBox>
5+
<CBox background="blue.900" height="80px"></CBox>
6+
<CBox background="darkorange" height="80px"></CBox>
7+
<CBox background="yellow" height="80px"></CBox>
8+
</CSimpleGrid>
9+
</template>

‎components/content/examples/simplegrid/SimpleGridResponsive.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<CSimpleGrid :columns="[2, null, 3]" spacing="40px">
3+
<CBox background="green" height="80px"></CBox>
4+
<CBox background="red" height="80px"></CBox>
5+
<CBox background="blue.900" height="80px"></CBox>
6+
<CBox background="darkorange" height="80px"></CBox>
7+
<CBox background="yellow" height="80px"></CBox>
8+
</CSimpleGrid>
9+
</template>

‎components/content/examples/simplegrid/SimpleGridSpacing.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<CSimpleGrid :columns="2" spacing-x="40px" spacing-y="20px">
3+
<CBox background="green" height="80px"></CBox>
4+
<CBox background="red" height="80px"></CBox>
5+
<CBox background="blue.900" height="80px"></CBox>
6+
<CBox background="darkorange" height="80px"></CBox>
7+
<CBox background="yellow" height="80px"></CBox>
8+
</CSimpleGrid>
9+
</template>

‎content/4.components/simplegrid.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: SimpleGrid
3+
description: SimpleGrid component
4+
version: 2.0+
5+
---
6+
7+
# SimpleGrid
8+
9+
10+
SimpleGrid is a user-friendly tool for effortlessly creating responsive grid layouts, utilizing a div element with display: grid.
11+
12+
## Import
13+
14+
```js
15+
import { CSimpleGrid } from '@chakra-ui/vue-next';
16+
```
17+
18+
## Usage
19+
20+
Specifying the number of columns for the grid layout.
21+
22+
### Sample Tag :
23+
24+
::showcase
25+
::simple-grid-example{width=full}
26+
::
27+
::
28+
29+
```html
30+
<CSimpleGrid :columns="2" :spacing="10">
31+
<CBox background="green" height="80px"></CBox>
32+
<CBox background="red" height="80px"></CBox>
33+
<CBox background="blue.900" height="80px"></CBox>
34+
<CBox background="darkorange" height="80px"></CBox>
35+
<CBox background="yellow" height="80px"></CBox>
36+
</CSimpleGrid>
37+
```
38+
39+
You can also make it responsive by passing array or object values into the `columns` prop.
40+
41+
::showcase
42+
::simple-grid-responsive{width=full}
43+
::
44+
::
45+
46+
```html
47+
<CSimpleGrid :columns="[2, null, 3]" spacing="40px">
48+
<CBox background="green" height="80px"></CBox>
49+
<CBox background="red" height="80px"></CBox>
50+
<CBox background="blue.900" height="80px"></CBox>
51+
<CBox background="darkorange" height="80px"></CBox>
52+
<CBox background="yellow" height="80px"></CBox>
53+
</CSimpleGrid>
54+
```
55+
56+
### Auto-responsive grid#
57+
58+
To make the grid responsive adjust automatically without passing `columns`, simply pass the `min-child-width` prop to specify the `min-width` a child should have before adjusting the layout.
59+
60+
This uses css grid `auto-fit` and `minmax()` internally.
61+
62+
### Changing the spacing for columns and rows
63+
64+
Simply pass the `spacing` prop to change the row and column spacing between the grid items. `SimpleGrid` also allows you pass `spacing-x` and `spacing-y` to define the space between columns and rows respectively.
65+
66+
::showcase
67+
::simple-grid-spacing{width=full}
68+
::
69+
::
70+
71+
```html
72+
<CSimpleGrid :columns="2" spacing-x="40px" spacing-y="20px">
73+
<CBox background="green" height="80px"></CBox>
74+
<CBox background="red" height="80px"></CBox>
75+
<CBox background="blue.900" height="80px"></CBox>
76+
<CBox background="darkorange" height="80px"></CBox>
77+
<CBox background="yellow" height="80px"></CBox>
78+
</CSimpleGrid>
79+
```
80+
81+
## Props
82+
83+
SimpleGrid composes `Box` so you can pass all the `Box` props and CSS grid props with the addition of these:
84+
85+
| Name | Type | Description |
86+
|------------------|-----------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
87+
| `columns` | `number` | The number of columns |
88+
| `spacing` | `GridProps["gridGap"]` | The gap between the grid items |
89+
| `spacingX` | `GridProps["gridGap"]` | The `column` gap between the grid items |
90+
| `spacingY` | `GridProps["gridGap"]` | The `row` gap between the grid items |
91+
| `minChildWidth` | `CSSProperties["minWidth"]` | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |

0 commit comments

Comments
 (0)