<grid>
<grid-item label="Grid" v-for="i in 9">
<img slot="icon" src="../assets/grid_icon.png">
</grid-item>
</grid>
grid
grid
Props
| name | type | default | description | required version |
| rows | number | 3 | (deprecated after v2.6.0) the number of rows. Less than 5 will be better | v2.2.0 |
| cols | number | 3 | the number of columns. if there is more than one row in grid, need to set cols value, otherwise all grid items will show in one row with the same width | v2.6.1 |
| show-lr-borders | boolean | true | whether show left and right borders | v2.8.1 |
| show-vertical-dividers | boolean | true | whether show vertical dividers | v2.8.1 |
Slots
| name | description | required version |
| default | default slot for grid-item list | -- |
grid-item
grid-item
Props
| name | type | default | description | required version |
| icon | string | icon url. if using local resources, it is better to use slot=icon | -- | |
| label | string | label text | -- | |
| link | string | vue-router's path | -- |
Slots
| name | description | required version |
| icon | icon slot, use tag:img | -- |
| label | slot for label, the same func as prop:label | -- |
Contributors
Contributors
Total commits quantity: 21,Total contributors quantity: 3
airylandQiongrong JiangLinHaobinChangelog
Releases
- v2.8.1 [feature] add prop:show-lr-borders and prop:show-vertical-dividers #2488
- v2.6.1 [feature] add `cols` props
- v2.6.0 [change] prop:rows is deprecated #1971
- v2.2.0 [feature] Support dynamic rows
- v2.2.0 [enhance] Hide slot:icon and slot:label if not being set
- v2.0.14 [feature] Add component `grid`