dingui-mini/README.tnpm.md

钉钉DingUI小程序核心组件库焕新升级，在2.0版本全面支持DarkMode，欢迎使用

<!-- API_START -->
# dingui-mini 介绍
DingUI小程序组件（dingui-mini）是一套遵循钉钉设计规范的组件库，
涵盖基础组件和业务组件，由钉钉官方为钉钉小程序量身设计，让用户的体验和感知统一。

目前同时支持钉钉小程序与支付宝小程序：

扫码体验：

<div>钉钉小程序</div>
<img src="https://gw.alicdn.com/tfs/TB1Vn8MfCf2gK0jSZFPXXXsopXa-378-350.png" width="200"/>

# demo仓库地址
[http://gitlab.alibaba-inc.com/dingui/dingui-mini-demo-internal](http://gitlab.alibaba-inc.com/dingui/dingui-mini-demo-internal)


# 安装

`npm install yarn @ali/yarn -g --registry=http://registry.npm.alibaba-inc.com`

`ayarn add @ali/dingui-mini`
# 使用
## API和Document
dingui-mini组件库提供了丰富的文档：`http://dux.dingtalk.com`，

同时提供了本地化demo&doc代码给开发者，开发者可以通过下载demo代码，运行ayarn ，然后ide中打开来查看

## 使用dingui-mini
dingui-mini的使用方式与自定义组件的使用方式相同，这里以button为例，简要描述如何使用dingui-mini组件库:

### 1.引入组件
安装dingui-mini组件库后，在我们将要使用组件的页面json文件中引入dingui-mini组件，例如：

在 页面 page.json中写入代码(为了区别于原生组件，强烈建议使用dingui-开头 以引入)：

```json
  {
    "component": true,
    "usingComponents": {
      "dingui-button": "@ali/dingui-mini/es/button/src/index"
    }
  }
```
### 2.使用组件

此时，在页面axml中可以通过<dingui-button>元素使用dingui-mini组件啦，

通过查看文档了解到button的属性后配置如下：

```html
  <dingui-button type="primary" onDmCatchTap="onDmTap" className="dingui-button-default">主要操作</dingui-button>
```

### 3.组件的事件开发

上文中我们使用了onDmCatchTap事件，此事件指向了onDmTap方法，故需要我们在页面js文件中，开发该方法,即可
```js
Page({
  onDmTap(e,comp){
    console.log(e,comp)
  }
})
```
### 4.如何在事件中回传数据
在页面中使用dingui-mini组件，希望传递一些信息给组件，在组件事件被触发时回调给页面:
可以自定义一个新属性，会在回调事件被带回（具体带回方式见组件文档）返回组件对象的，在组件的props中返回，如：
```html
  <dingui-button mydata="{{mydata}}" onDmCatchTap="onDmCatchTap">xxx</dingui-button>
```
```js
Page({
  data:{
    mydata : {
      hello : "world"
    }
  },
  onDmTap(e,comp){
    console.log(comp.props.mydata)
  }
})
```

### 注意事项

#### 1.不可以改变组件内部环境
在页面中使用，切忌不可尝试改变组件内部data或者方法等
#### 2.输入框组件传值问题
需要把组件值实时存入页面变量中 ，再通过修改组件的props来处理

```html
<dingui-input value="{{value}}"  onDmInput="onInputChange"/>
```

```js
Page({
  onInputChange(e,comp){
    this.text =e.detail.value;
  },
  changeValue(text){
    this.setData({
      value: this.text
    })
  }
})
```
#### 3.关于a:for等
a:if ,a:for等最好在block组件中使用


# dingui-mini的相关文档
[https://yuque.antfin-inc.com/ding-eapp/yyoxrd](https://yuque.antfin-inc.com/ding-eapp/yyoxrd)

# dingui-mini的changeLog

[https://yuque.antfin-inc.com/ding-eapp/oiiyk3/tfxrwr](https://yuque.antfin-inc.com/ding-eapp/oiiyk3/tfxrwr)
# 欢迎加入dingui-mini开发交流群

<img src="https://img.alicdn.com/tfs/TB1LkmrdlCw3KVjSZFuXXcAOpXa-970-1280.png" width="200"/>

## 钉钉小程序标准组件库核心库
* 1.4.4

  -文档的错误修复
  -修复empty组件换页面问题
  -更新input组件视觉（文字大小）

* 1.4.3

  -文档demo在线交互可视化
  -修复button的border颜色
  -修复stepper组件的disabled bug

* 1.4.1

  -新增列表左滑swipe-action组件

  -修复多选最后一行有border的bug

  -修复list组件hasborder属性的bug
  
  -list-item组件图表区域支持文本（昵称）展示
* 1.4.0

  -新增布局组件2个（row和col）

  -tag组件点击事件bug fix

  -checkbox-item组件参数 bug fix

  -蓝色气泡tooltips组件demo代码可读性优化

  -search-bar组件添加点击事件

  -empty空页面组件添加局部效果（跟随页面，非全屏）

* 1.3.8 红点不对齐问题fix

  -搜索框搜索后添加了自动收起功能

  -输入框组件增加readOnly属性

  -tag组件的small状态去掉点击效果

* 1.3.7 
  
  -list组件头像和checkbox同时存在时的位置修复
  
  -input placeholder视觉修复
  
  -tag组件在父级flex元素时的拉抻bug修复

* 1.3.6 icon组件weex下bug修复
* 1.3.5 stepper组件完善，button组件兼容性bug修复
* 1.3.4 新增步进器stepper组件
* 1.3.3 修复es6的问题！重要！
* 1.3.0 新增固钉和塞选组件，tag组件的样式更新，以及list组件arrow区域点击范围增大
* 1.2.0 新增水印和顶部通知组件，修复tag组件的一些bug，以及list组件brief区域右侧间距问题
* 1.1.1 修复了list的disabled效果
* 1.1.0
  1.新增tag，radio-item，radio-group，checkbox，checkbox-item，checkbox-group组件
  2.新增weex化组件：分段器，通知栏，面包屑，tag
  3.button 在部分安卓下的边框显示bug修复，新增catchTap
  4.listweex化下支持了按下效果
* 1.0.0-beta.8 list/icon/switch weex版本
* 1.0.0 第一版
* 0.0.1 项目初始化
<!-- API_END -->