mx-grid 卡片图标

mx-grid 卡片图标

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

#引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-grid": "/miniprogram_npm/m-ui/mx-grid/index"，
  "mx-grid-item": "/miniprogram_npm/m-ui/mx-grid-item/index"，
  "mx-grid-card-item": "/miniprogram_npm/m-ui/mx-grid-card-item/index"
}

#小程序码

可使用微信扫码查看小程序码

#

#代码演示

#基本用法

可以通过mx-grid-card-item组件来设置固定卡片类型，type可选big和small,value为卡片的值，unit为卡片的单位，describe为卡片描述。

 <mx-row gutter="10">
      <mx-col span="12">
        <mx-panel custom-class="row-layout row-layout-two">
          <mx-grid-card-item value="-2" type="big" describe="冷藏室" unit="°C"></mx-grid-card-item> </mx-panel
      ></mx-col>
      <mx-col span="12">
        <mx-panel custom-class="row-layout row-layout-two"
          ><mx-grid-card-item value="-17" type="big" describe="冷冻室" unit="°C"></mx-grid-card-item></mx-panel
      ></mx-col>
    </mx-row>

#小卡片

<mx-grid column-num="2">
      <mx-grid-item use-slot>
        <mx-grid-card-item value="0" type="small" describe="昨日开关门次数" unit="次"></mx-grid-card-item
      ></mx-grid-item>
      <view class="vertical-line"></view>
      <mx-grid-item use-slot>
        <mx-grid-card-item value="100" type="small" describe="昨日节能指数" unit="分"></mx-grid-card-item
      ></mx-grid-item>
    </mx-grid>

#自定义列数

<mx-grid column-num="3">
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" />
</mx-grid>

#自定义内容

通过插槽可以自定义格子展示的内容。

<mx-grid column-num="3" border="{{ false }}">
  <mx-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
    <image
      style="width: 100%; height: 90px;"
      src="demo.jpg"
    />
  </mx-grid-item>
</mx-grid>

#正方形格子

设置square属性后，格子的高度会和宽度保持一致。

<mx-grid square>
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />
</mx-grid>

#格子间距

通过gutter属性设置格子之间的距离。

<mx-grid gutter="{{ 10 }}">
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />
</mx-grid>

#内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<mx-grid direction="horizontal" column-num="2">
  <mx-grid-item icon="photo-o" text="文字" />
  <mx-grid-item icon="photo-o" text="文字" />
  <mx-grid-item icon="photo-o" text="文字" />
</mx-grid>

#API

#Grid Props

参数	说明	类型	默认值
column-num	列数	number	4
icon-size	图标大小，默认单位为px	string	28px
gutter	格子之间的间距，默认单位为px	string,number	0
border	是否显示边框	boolean	true
center	是否将格子内容居中显示	boolean	true
square	是否将格子固定为正方形	boolean	false
clickable	是否开启格子点击反馈	boolean	false
direction	格子内容排列的方向，可选值为 horizontal	string	vertical
info	图标右上角提示信息	string、number	-
reverse	是否调换图标和文本的位置	boolean	false
use-slot	是否使用自定义内容的插槽	boolean	false

#GridCardItem Props

参数	说明	类型	默认值
value	值	string	-
unit	单位	string	-
describe	描述	string	-
type	类型。可选值big``small	string	big

#GridItem Props

参数	说明	类型	默认值
text	文字	string	-
icon	图标名称或图片链接	string	-
icon-color	图标颜色	string	-
icon-prefix	第三方图标前缀	string	mx-icon
dot	是否显示图标右上角小红点	boolean	false
badge	图标右上角徽标的内容	string,number	-
url	点击后跳转的链接地址	string	-
link-type	链接跳转类型，可选值为 redirectTo switchTab reLaunch	string	navigateTo

#Grid 外部样式类

名称	说明
custom-class	根节点样式类

#GridItem Events

事件名	说明	参数
bind:click	点击格子时触发	-

#GridItem 外部样式类

名称	说明
custom-class	根节点样式类
content-class	内容样式类
icon-class	图标样式类
text-class	文本样式类

#GridItem Slots

名称	说明
-	自定义宫格的所有内容，需要设置use-slot属性
icon	内容样式自定义图标，如果设置了use-slot或者icon属性则不生效类
text	自定义文字，如果设置了use-slot或者text属性则不生效