小程序开发框架

# mx-status 设备状态

该组件提供了设备状态，设备模式，设备预约等状态展示的样式。

# 引入

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

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

# 小程序码

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

#

# 代码演示

# 基本用法

展示设备的开关机状态。

<mx-status custom-class="custom-status-class">
  <mx-status-item show-status status="on" text="待机中"><mx-status-item>
</mx-status>
 <mx-status custom-class="custom-status-class">
  <mx-status-item show-status status="off" text="已关机"></mx-status-item>
 </mx-status>

# 自定义按钮颜色

通过active-color展示设备的开机状态按钮颜色。

<mx-status custom-class="custom-status-class">
  <mx-status-item show-status active-color="#267AFF" status="on" text="待机"><mx-status-item>
</mx-status>
<mx-status custom-class="custom-status-class">
  <mx-status-item active-color="#FFAA10" show-tatus status="on" text="待机中"><mx-status-item>
</mx-status>

# 状态+模式

模式状态不需要设置参数showStatus和status，设置文案即可。

  <mx-status>
      <mx-status-item showStatus margin-right="12" status="on" text="洗涤中"></mx-status-item>
      <view class="demo-divider"></view>
      <mx-status-item text="智能洗"></mx-status-item>
  </mx-status>

.demo-divider{
  background:#c9c9c9;
  width: 1px;
  height: 20px;
  margin-top: 7px;
}

# 状态+预约

预约是另外一种展示类型，通过 type="appoint"设置预约。同时加了appoint-text和 appoint-describe两个字段。

  <mx-status>
  <mx-status>
          <mx-status-item showStatus margin-right="12" status="on" text="保温中"></mx-status-item>
          <view class="demo-divider"></view>
          <mx-status-item
            margin-left="12"
            appoint-text="预约加热至75℃"
            appoint-describe="明天下午6:00-9:00"
            type="appoint"
          ></mx-status-item>
        </mx-status>

.demo-divider{
  background:#c9c9c9;
  width: 1px;
  height: 20px;
  margin-top: 7px;
}

# API

# status-item Props

参数 说明 类型 默认值
show-status 是否展示状态按钮 boolean false
status 设备状态，可选值on off string on
active-color 设备状态按钮颜色 string #25CF42
type 设备状态类型，可选值default appoint string default
text 设备状态文案，type="default"可用 string -
appoint-text 预约设备状态文案，type="appoint"可用 string -
appoint-describe 预约设备状态描述，type="appoint"可用 string -
margin-left 左边距 string 16
margin-right 右边距 string 16

# status 外部样式类

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

# status-item 外部样式类

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

# solt

名称 说明
- 自定义text显示内容
appointText 自定义appoint-text显示内容
appointDescribe 自定义appoint-describe显示内容

← 设备信息（information） →