<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`