小程序开发框架

# mx-information 设备信息

该组件提供了设备信息展示的样式。

# 引入

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

"usingComponents": {
  "mx-information": "/miniprogram_npm/m-ui/mx-information/index",
  "mx-information-item": "/miniprogram_npm/m-ui/mx-information-item/index"
}

# 小程序码

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

#

# 代码演示

# 基本用法

展示设备的基本类型内容，描述，单位。

<mx-information custom-class="demo-information-view">
  <mx-information-item content="32" show-devider unit="°C" text="室外温度"></mx-information-item>
  <mx-information-item content="21" show-devider unit="°C" text="室内温度"></mx-information-item>
  <mx-information-item content="60" unit="%" text="室内湿度"></mx-information-item>
</mx-information>

.demo-information-view{
  background-color: #fff;
}

# 大号类型

设置mx-information的type="large"，即可展示大号。

<mx-information type="large" custom-class="demo-information-view">
    <mx-information-item show-devider content="32" unit="°C" type="large" text="室外温度"></mx-information-item>
    <mx-information-item show-devider content="21" unit="°C" type="large" text="室内温度"></mx-information-item>
    <mx-information-item content="60" unit="%" type="large" text="室内湿度"></mx-information-item>
  </mx-information>

.demo-information-view{
  background-color: #fff;
}

# 自定义颜色

设置mx-information-item组件的color和 text-color分别控制内容和描述的颜色。

  <mx-information custom-class="demo-information-view">
      <mx-information-item
        show-devider
        content="32"
        unit="°C"
        color="#267AFF"
        text-color="#29C3FF"
        text="室外温度"
      ></mx-information-item>
      <mx-information-item
        show-devider
        content="21"
        unit="°C"
        color="#995EFC"
        text-color="#29C3FF"
        text="室内温度"
      ></mx-information-item>
      <mx-information-item
        content="60"
        unit="%"
        color="#00CBB8"
        text-color="#25CF42"
        text="室内湿度"
      ></mx-information-item>
    </mx-information>

.demo-information-view{
  background-color: #fff;
}

# 竖向排列

设置mx-information的type="vertical"即可竖向排列

<mx-information type="vertical" unit-postion-top>
    <mx-information-item show-devider content="32" unit="°C" text="室外温度"></mx-information-item>
    <mx-information-item show-devider content="21" unit="°C" text="室内温度"></mx-information-item>
    <mx-information-item content="60" unit="%" text="室内湿度"></mx-information-item>
</mx-information>

.demo-information-view{
  background-color: #fff;
}

# API

# information Props

参数 说明 类型 默认值
type 信息展示类型，可选值default large vertical string default
unit-postion-top 单位是否与内容顶部对齐 boolean false
size 内容字体大小，暂未开放该属性 string 16
text-size 描述字体大小，暂未开放该属性 string 12

# information-item Props

参数 说明 类型 默认值
color 内容颜色 string #666666
text-color 描述颜色 string #8A8A8F
content 内容 string -
unit 单位 string -
text 描述 string -
index 当前索引 string -
show-devider 是否显示分割线 boolean false

# information 外部样式类

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

# information-item 外部样式类

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

# solt

名称 说明
content 自定义显示内容
text 自定义显示描述

← 面板（panel） →