Grid
Install

Install

<grid>
  <grid-item label="Grid" v-for="i in 9">
    <img slot="icon" src="../assets/grid_icon.png">
  </grid-item>
</grid>

grid

grid

Props

nametypedefaultdescriptionrequired version
rowsnumber3(deprecated after v2.6.0) the number of rows. Less than 5 will be betterv2.2.0
colsnumber3the 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 widthv2.6.1
show-lr-bordersbooleantruewhether show left and right bordersv2.8.1
show-vertical-dividersbooleantruewhether show vertical dividersv2.8.1

Slots

namedescriptionrequired version
defaultdefault slot for grid-item list--
grid-item

grid-item

Props

nametypedefaultdescriptionrequired version
iconstringicon url. if using local resources, it is better to use slot=icon--
labelstringlabel text--
linkstringvue-router's path--

Slots

namedescriptionrequired version
iconicon slot, use tag:img--
labelslot for label, the same func as prop:label--


Contributors

Contributors

Total commits quantity: 21,Total contributors quantity: 3

airylandQiongrong JiangLinHaobin

Changelog

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`