Grid 网格

配合 xm-grids 使用

  1. <xm-grids row="3">...</xm-grids>

属性

参数 说明 类型 可选值 默认值
row 每行显示列数 String 2,3,4,5,6 4

基础用法

使用href属性来定义 Grid 的样式，icon 和 text 两个slot

  1. <xm-grids row="3">
  2.     <xm-grid href="https://github.com/monw3c/xmui">
  3.         <span slot="icon" class="xm__icon--phone"></span>
  4.         <span slot="text">手机</span>
  5.     </xm-grid>
  6.     <xm-grid>
  7.         <span slot="icon" class="xm__icon--lbsfill" @click="clickAction"></span>
  8.         <span slot="text">位置</span>
  9.     </xm-grid>
  10.     <xm-grid>
  11.         <span slot="icon" class="xm__icon--lock"></span>
  12.         <span slot="text">密码</span>
  13.     </xm-grid>
  14.     <xm-grid>
  15.         <span slot="icon" class="xm__icon--qrcode"></span>
  16.         <span slot="text">扫码</span>
  17.     </xm-grid>
  18.     <xm-grid>
  19.         <span slot="icon" class="xm__icon--date"></span>
  20.         <span slot="text">时间</span>
  21.     </xm-grid>
  22.     <xm-grid>
  23.         <span slot="icon" class="xm__icon--contact"></span>
  24.         <span slot="text">电话</span>
  25.     </xm-grid>
  26. </xm-grids>

属性

参数 说明 类型 可选值 默认值
href 设置链接 String — javascript:;

原文: https://monw3c.github.io/xmui/#/components/grid