chris-ui
Version:
Chris/赵愚豪 - 自研UI
210 lines (168 loc) • 6.37 kB
Markdown
# 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 示例代码
```json
{
"defaultTitle": "Popup",
"usingComponents": {
"popup": "chris-ui/Com/popup/index"
}
}
```
### .axml 示例代码
```html
<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 示例代码
```js
Page({
data: {
showTop: false,
},
onTopBtnTap() {
this.setData({
showTop: true,
});
},
onPopupClose() {
this.setData({
showTop: false,
});
},
});
```
## 属性说明
| **属性** | **类型** | **必填** | **描述** |
| ------------- | -------- | -------- | :----------------------------------------------------------- |
| className | String | false | 自定义 class。 |
| show | Boolean | false | 是否显示菜单。 |
| animation | Boolean | false | 是否开启动画。 |
| mask | Boolean | true | 是否显示 mask，不显示时点击外部不会触发 onClose。 |
| position | String | true | 控制从什么方向弹出菜单，bottom 表示底部，left 表示左侧，top 表示顶部，right 表示右侧。 |
| disableScroll | Boolean | false | 展示 mask 时是否禁止页面滚动。 |
| zIndex | Number | false | 定义 popup 的层级。 |
# Card卡片
### .json 示例代码
```json
{
"defaultTitle": "card",
"usingComponents": {
"card": "chris-ui/Com/card/index"
}
}
```
### .axml 示例代码
```html
<card title="{{title}}" rightIcon="{{true}}">
<view>
测试名称：测试名称
</view>
</card>
```
### .js 示例代码
```js
Page({
data: {
title: '卡片名称',
},
});
```
## 属性说明
| 属性 | 类型 | 必填 | 描述 |
| --------- | ------- | ----- | ---------------- |
| title | String | false | 卡片的标题 |
| rightIcon | Boolean | false | 是否显示右侧箭头 |
| className | String | false | 自定义 class。 |
# SearchBar 搜索框
### json 示例代码
```json
{
"defaultTitle": "Search-bar",
"usingComponents": {
"search-bar": "chris-ui/Com/search-bar/index"
}
}
```
### .axml 示例代码
```html
<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 示例代码
```javascript
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,
});
},
});
```
## 属性说明
| **属性** | **类型** | 默认值 | **描述** |
| ---------------- | ----------------------- | ------- | :--------------------------------------------------- |
| value | String | | 搜索框的当前值。 |
| placeholder | String | | placeholder。 |
| focus | Boolean | false | 自动获取光标。 |
| showVoice | Boolean | false | 是否展示voice图标。 |
| onInput | (value: String) => void | | 键盘输入时触发。 |
| onClear | (val: String) => void | | 点击 clear 图标触发。 |
| onFocus | () => void | | 获取焦点时触发。 |
| onBlur | () => void | | 失去焦点时触发。 |
| onCancel | () => void | | 点击取消时触发。 |
| onVoiceClick | () => void | | 点击 voice 图标时触发。 |
| onSubmit | (val: String) => void | | 点击键盘的 enter 时触发。 |
| disabled | Boolean | false | 设置禁用。 |
| maxLength | Number | | 最多允许输入的字符个数。 |
| showCancelButton | Boolean | false | 是否一直显示取消按钮。 |
| cancelvalue | String | 取消 | 右侧取消按钮的文字 |
| borderColor | String | #B7282D | 搜索输入框边框色。 |
| enableNative | Boolean | false | 如为 false 可处理 fixed 定位后输入框内容闪动的问题。 |
| controlled | Boolean | true | 组件是否受控。 |