chris-ui v0.0.5

Chris—UI

本ui框架针对于钉钉小程序快速开发

该项目尚处于开发起步阶段，感谢支持

This ui framework is aimed at the rapid development of DingTalk applet

This project is still in the initial stage of development, thanks for your support

Popup 弹出菜单

.json 示例代码

{
 "defaultTitle": "Popup",
 "usingComponents": {
        "popup": "chris-ui/Com/popup/index"
    }
}

.axml 示例代码

<view>
 <view class="btn-container">
   <button onTap="onTopBtnTap">弹出popup</button>
 </view>
 <popup show="{{showTop}}" position="top" onClose="onPopupClose">
   <view style="height: 200px; background: #fff; display: flex; justify-content: center; align-items: center;">
       hello world
   </view>
 </popup>
</view>

.js 示例代码

Page({
 data: {
   showTop: false,
 },
 onTopBtnTap() {
   this.setData({
     showTop: true,
   });
 },
 onPopupClose() {
   this.setData({
     showTop: false,
   });
 },
});

属性说明

Card卡片

.json 示例代码

{
 "defaultTitle": "card",
 "usingComponents": {
        "card": "chris-ui/Com/card/index"
    }
}

.axml 示例代码

  <card title="{{title}}" rightIcon="{{true}}">
    <view>
      测试名称：测试名称
    </view>
  </card>

.js 示例代码

Page({
 data: {
   title: '卡片名称',
 },
});

属性说明

SearchBar 搜索框

json 示例代码

{
 "defaultTitle": "Search-bar",
 "usingComponents": {
   "search-bar": "chris-ui/Com/search-bar/index"
 }
}

.axml 示例代码

  <search-bar
    value="{{value}}"
    focus="{{true}}"
    disabled="{{false}}"
    maxLength="{{20}}"
    showVoice="{{showVoice}}"
    placeholder="搜索"
    onInput="handleInput"
    onClear="handleClear"
    onCancel="handleCancel"
    onSubmit="handleSubmit"
    cancelvalue="{{cancelvalue}}"
    showCancelButton="{{false}}" />

.js 示例代码

Page({
  data: {
    value: '',
    showVoice: false,
    cancelvalue:'重置'
  },
  handleInput(value) {
    this.setData({
      value,
    });
  },
  handleClear() {
    this.setData({
      value: '',
    });
  },
  handleCancel() {
    this.setData({
      value: '',
    });
  },
  onChange(e) {
    this.setData({
      showVoice: e.detail.value,
    });
  },
});

属性说明