nervjs / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库

Taro UI

一款基于 Taro 框架开发的多端 UI 组件库

特性

• 基于 Taro 开发 UI 组件
• 一套组件可以在 微信小程序，支付宝小程序，百度小程序，H5，ReactNative 多端适配运行
• 提供友好的 API，可灵活的使用组件

关于 Taro

Taro 是由 凹凸实验室 倾力打造的多端开发解决方案。现如今市面上端的形态多种多样，Web、ReactNative、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。

体验

请使用微信扫一扫以下体验码

相关链接

• Taro UI 使用文档
• Taro UI 官方示例
• Taro
• Taro 物料市场
• Taro 论坛 Taro-UI 板块

安装

2.x

当 Taro 版本 < 3 时，使用 2.x 版本

$ npm install [email protected]

3.x

当 Taro 版本 ≥ 3 时，使用 3.x 版本

$ npm install taro-ui@latest

使用

在代码中 import 需要的组件并按照文档说明使用

import { AtButton } from 'taro-ui'

开发交流

官方微信交流群

开发计划

开发计划

路线图

贡献

如果你在使用 Taro UI 时遇到问题，或者有好的建议，欢迎给我们提 Issue 或 Pull Request。在开始之前，请阅读 贡献指南

License

MIT

taro-ui's Issues

是否支持美团mpvue环境?

怎么自定义theme？

近期会上吧？

style 不能作用于组件？

例如如下 style 无效

<AtButton style="color: red">按钮文案</AtButton>

能否建个交流群，这样讨论问题也方便

能否建个交流群，这样讨论问题也方便

前缀At很别扭

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

官方交流群

最新 Taro UI 官方交流群

最新群二维码

typescript支持

AtAvatar控件如何兼容taro的<OpenData type='userAvatarUrl' />

AtAvatar控件如何兼容taro的
taro里image属性无法传入 JSX 元素

优秀案例征集

大家好，

Taro 作为开源项目已经有一段时间了，在开源期间我们积极响应各路开发者的疑问与反馈，持续不断打磨 Taro ，希望 Taro 能更加完善，帮助更多开发者提升开发效率，改善开发体验。但在庞大的开发工作量下我们深感自身能力的不足，不能很好地为大家提供 Demo、案例供大家学习，同时也没有足够的精力去适配开发一些第三方库来让开发工作更加美好。这时候我们深刻觉得社区力量的重要性，所以我们开启这一篇 isuue，强烈希望各路大佬们能一起贡献优秀的 Demo 与案例，开发第三方库的适配，从而让 Taro 更加健壮，更加好用。(by Taro 之父）

Taro UI 是为 Taro 量身定制的一套多端 UI 组件库，目前离成熟的组件库还有一些距离，我们会不断地迭代新版本，例如完善基础组件库、增加业务组件等。社区的活力是我们持续迭代的动力❤️

样式覆盖

rt：怎么覆盖样式

npm install taro-ui extract:nerv-server: http fetch POST 404 https://r.cnpmjs.org/-/npm/v1/security/audits/quick 8

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

弹框有点丑

弹框中间的边框感觉不是 1px ，过渡效果感觉一股山寨气息，不如不要过渡效果了

AtInput 和 AtForm 使用出错

重现步骤

import Taro, {Component} from '@tarojs/taro'
import {View, Form} from '@tarojs/components'
import { AtInput, AtForm } from 'taro-ui'
import './withdraw.scss'
import ajax from '../../../utils/ajax'

export default class Withdraw extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }
  
  config = {
    navigationBarTitleText: '提现'
  }
  
  componentWillMount() {
  }
  
  
  onShareAppMessage() {
  }
  
  onPullDownRefresh() {
    this.componentWillMount();
  }
  
  render() {
    return (
      <View className='withdraw'>
        <AtForm>
          <AtInput name='name' title='姓名' maxlength={5} />
          <AtInput name='tel' title='手机号码' maxlength={11} />
          <AtInput name='id_card' title='身份证号' maxlength={18} />
          <AtInput name='bank_card_number' title='银行卡号' maxlength={11} />
        </AtForm>
      </View>
    )
  }
}

编译后是有这些文件的：

依赖的版本号

Node: v8.11.2
Taro: v1.0.0-beta.22
Taro-UI: v1.1.0

预期结果

正常运行

实际结果

 module "npm/taro-ui/dist/weapp/components/icon/index.js" is not defined 
 Error: module "npm/taro-ui/dist/weapp/components/icon/index.js" is not defined

Component is not found in path "npm/taro-ui/dist/weapp/components/icon/index" (using by "npm/taro-ui/dist/weapp/components/input/index")
Error: Component is not found in path "npm/taro-ui/dist/weapp/components/icon/index" (using by "npm/taro-ui/dist/weapp/components/input/index")

相关链接

AtPagination发现问题，total无法注入，导致无法使用

重现步骤

数据
{"code":1,"message":"success","data":{"total":6,"list":[{"id":1,"factory_name":"ABC公司","terminal_no":"ZD70","type_name":"D机器","model_name":"QZJ","vin":"00000000000000001","serial_no":"CAR01","sale_status":"00"},{"id":2,"factory_name":"ABC公司","type_name":"A机器","model_name":"PDJ","vin":"00000000000000002","serial_no":"CAR02","sale_status":"00"},{"id":3,"factory_name":"ABC公司","type_name":"C机器","model_name":"TTJ","vin":"00000000000000003","serial_no":"CAR03","sale_status":"00"},{"id":4,"factory_name":"ABC公司","type_name":"E机器","model_name":"ZZJ","vin":"00000000000000004","serial_no":"CAR04","sale_status":"00"},{"id":5,"factory_name":"ABC公司","type_name":"B机器","model_name":"YLJ","vin":"00000000000000005","serial_no":"CAR05","sale_status":"00"},{"id":6,"factory_name":"ABC公司","type_name":"F机器","model_name":"WJJ","vin":"00000000000000006","serial_no":"CAR06","sale_status":"00"}],"page_num":1,"page_size":6,"size":6,"start_row":0,"end_row":5,"pages":1,"pre_page":0,"next_page":0,"is_first_page":true,"is_last_page":true,"has_previous_page":false,"has_next_page":false,"navigate_pages":8,"navigatepage_nums":[1],"navigate_first_page":1,"navigate_last_page":1,"first_page":1,"last_page":1}}

赋值部分是在Taro.request的then里面，和渲染部分的代码
https://user-images.githubusercontent.com/22185826/44966653-0979ad80-af6f-11e8-8707-c97826f54acf.png
https://user-images.githubusercontent.com/22185826/44966755-a1779700-af6f-11e8-8253-5b3f790fc6c5.png

依赖的版本号

taro-ui: 1.1.0

预期结果

页数和翻页行为正确

实际结果

渲染部分，total没进去，结果整个都不正确了。因为total问题，换页的方法没法继续了，不知道是不是采坑了

相关链接

建议tabbar支持自定义iconfont图标

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

建议AtListItem可以嵌套AtCard,实现复杂列表布局

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

npm run dev:h5编译报错

重现步骤

npm run build:h5 -- --watch

[email protected] build:h5 D:\Program Files\nodejs\progrem\taro\myApp
taro build --type h5 "--watch"

� Taro v1.0.0-beta.18

开始编译项目 myApp
创建 发现文件 src\app.js
创建 发现文件 src\app.scss
创建 发现文件 src\index.html
创建 发现文件 src\actions\counter.js
创建 发现文件 src\constants\counter.js
创建 发现文件 src\reducers\counter.js
创建 发现文件 src\reducers\index.js
创建 发现文件 src\store\index.js
创建 发现文件 src\pages\index\index.js
创建 发现文件 src\pages\index\index.scss

� Compile failed!

./.temp/app.js
Module build failed (from ./node_modules/_babel-loader@7.1.5@babel-loader/lib/in
dex.js):
Error: Couldn't find preset "env" relative to directory "D:\Program Files\node
js\progrem\taro\myApp\.temp"
at Array.map ()

ℹ️ Listening at http://10.1.1.108:8080/
ℹ️ Listening at http://localhost:8080/

监听文件修改中...

依赖的版本号

预期结果

实际结果

相关链接

关于<AtInput>组件的需求

您好，我想提一个需求，关于组件的需求，当type='phone'的时候，可不可以有选择的对输入的手机号进行分割,3-4-4效果,(3个数字 4个数字 4个数字)

预期结果

eg: 132 3345 4597

实际结果

eg: 13233454597

相关链接

示例小程序里在三级页面里的cell分割线有点粗

正常的：

粗的：

是否考虑支持自定义主题

最近开始使用taro开始尝试写小程序，看到taro-ui，眼前一亮，但是似乎没看见自定义主题的选项？后期是否考虑加入此功能，如果考虑，大概何时会加入？

建议实现可分页的select或dropdownlist, 方便查询的条件输入

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

TabBar icon不渲染，点击切换tab第一次会报错，onClick事件时不时触发

重现步骤

依赖的版本号

node v8.11.2
taro 1.0.0-beta.16
taro-ui 1.0.1

预期结果

实际结果

相关链接

[建议] Toast 和 Modal 提供 api 调用版本

建议 Toast 和 Modal 提供 api 调用版本，组件的方式有些繁琐。

tabbar 切换异常以及AtBtton功能缺失

具体效果如下

没有路由跳转的情况下,变动index是正常的

加入路由跳转之后就不正常了,其他页面的构造函数初始化current无效,效果如下

---

首页和关于是两个页面,
都加载了tabbar这个组件. 都是在构造函数中初始化的
第一个页面的索引设置0 , 第二个页面设置1;
同一个页面变动state是正常的,
当从路由跳转过去的时候是不正常的

Flex布局无效

taro 1.0.0-beta.21
taro-ui 1.1.0

Flex布局无效

已配置：
if (process.env.TARO_ENV === "weapp") {
require("taro-ui/dist/weapp/css/index.css")
} else if (process.env.TARO_ENV === "h5") {
require("taro-ui/dist/h5/css/index.css")
}

小程序构建出错

重现步骤

安装最新版taro-ui

依赖的版本号

taro-ui 1.0.0
taro 1.0.0-beta.18

预期结果

正常引入

实际结果

【建议】input-number 调起数字键盘而不是普通键盘

用户输入数字还要切换键盘

npm 包 缺少 TypeScript 的声明文件

npm 或 yarn 安装 taro-ui 后，node_modules 目录没有 taro-ui 的声明文件，也无法通过 @types/taro-ui 安装

FloatLayout 浮动弹层

滑动弹出层 底层页面会滚动

全局不能修改组件样式，建议能支持修改，官方图标太少，建议能添加自定义图标

[feature request] AtInput支持onClick事件

希望AtInput能支持onClick事件，这样的话配合editable就可以实现像选择器那样的输入实现了。

Tabs 标签页组件的tabList数组有多个元素时，会全部显示，没有可横向滑动效果。

依赖的版本号

"taro-ui": "^1.0.1",

问题描述

https://nervjs.github.io/taro-ui/#/docs/tabs

Tabs 标签页组件的tabList数组有多个元素时，会全部显示，没有可横向滑动效果。

且title文字多时，文字无法完整显示，后面文本会被遮挡。

复现步骤

[或者可以直接贴源代码，能贴文字就不要截图]

        <View className="tabWrap">
          {category[0] && (
            <View>
              <AtTabs
                current={topIndex}
                tabList={category}
                onClick={this.tabChange.bind(this, category)}
              />
              {!!category[topIndex] &&
                !!category[topIndex].childs && (
                  <AtTabs
                    current={secondIndex}
                    tabList={category[topIndex].childs}
                    onClick={this.childTabChange.bind(
                      this,
                      category[topIndex].childs
                    )}
                  />
                )}
            </View>
          )}
        </View>

期望行为

每个tab应设置一个最低宽度，且tab宽度因由内容文本撑开，当长度超出可视区域宽度时，应可横向滑动。

缺少常用的选择器组件

缺乏常用的选择器组件，比如日期，条件选择等

小程序怎么自定义样式？

如题，taro-ui在小程序中怎么自定义样式。

AtNoticebar 跑马灯模式若开始不渲染则会报错，取不到width

重现步骤

使用三元表达式进行条件渲染，当首次false不渲染AtNoticebar的时候会报错。

依赖的版本号

taro 1.0.0-beta.23 taro-ui 1.1.1 node 8.11.3

AtTabsPane is not defined

重现步骤

依赖的版本号

Node 的版本: 10.9.0
Taro 的版本：1.0.0-beta.23
Taro-UI 的版本：1.1.1

预期结果

正常运行

实际结果

相关链接

怎么不支持vue语法。只支持react语法!!

重现步骤

依赖的版本号

预期结果

实际结果

相关链接

npm install 安装后报错

按照文档，初始化项目之后（启用Redux），再npm install taro-ui --save, 会报以下错误。 很抱歉，一直做UI设计，前端新手，不知道是不是我哪步漏掉了。 即便我继续按照提示，npm install nervjs --save, 同样的方式安装redux， 也一直还是报以下错误。

`npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.2.16 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.2.17 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.2.17 but none is installed. You must install peer dependencies yourself.
npm WARN @tarojs/[email protected] requires a peer of nervjs@^1.2.17 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.

npm ERR! path /Users/.....PROJECT..../node_modules/.bin/lessc
npm ERR! code EEXIST
npm ERR! Refusing to delete /Users/....PROJECT../node_modules/.bin/lessc: is outside /Users/...PROJECT.../node_modules/less and not a link
npm ERR! File exists: /Users/......PROJECT.../node_modules/.bin/lessc
npm ERR! Move it away, and try again.`

初始化项目时，我启用的是SASS, 不清楚为什么会有这个错误： npm ERR! path /Users/.....PROJECT..../node_modules/.bin/lessc

依赖的版本号

node v10.8.0
npm v6.2.0

Debug日志在这里： https://www.dropbox.com/s/l7xmjoqsbout2z9/2018-08-28T08_35_30_600Z-debug.log.txt?dl=0

感谢！！

AtNoticebar 只会显示初始值

重现步骤

依赖的版本号

node v8.11.4 taro: v1.0.0-beta.23 taro-ui: 1.0.1

预期结果

希望更新内容数据的时候， AtNoticebar视图变化

实际结果

AtNoticebar只显示初始值， 视图不会随数据变化

相关链接

[Improvement] Tabs 组件高度问题

由于只是把别的 Tab 栏显示在屏幕外部，所以目前 Tab 栏每一项的高度是一样的，由最高的那个决定，这个体验很不好（见下图），而且对于滚动到底部加载的情况更是噩梦，希望能改进一下。

tabs支持自动滑动吗？

tabs栏的内容比较多，初始化页面的时候可能会初始化隐藏的tab项，是不是可以支持自动滑动到默认选中的项

【小程序】操作反馈-Toast轻提示，点击添加遮罩层后，其他的都点击不了

进入 操作反馈-Toast轻提示，点击添加遮罩层Toast后，其他按钮都点击不了

[Feature Request] 希望添加”长列表“组件（上拉加载、滚动到底部加载更多）

类似于 Ant Design 的 滚动加载 - 列表 List。

可以在已有的小程序项目中引用taro-ui吗

如果可以在已有的小程序项目中引用taro-ui，建议更新一下相关使用文档

taro-ui是凹凸实验室的产品吗

taro-ui是凹凸实验室的产品吗

[建议] 希望能接受自定义的style覆盖控件默认值

目前在控件上设置className、style都无效，
希望能接受自定义的style覆盖控件默认值

import taro-ui 出现 module not found

重现步骤

• 安装taro-ui之后
• 引入taro-ui
  
• 使用
  
• dev:h5模式下报错
  

依赖的版本号

• Node 的版本： 8.0.11
• Taro: 1.0.0-beta.23
• Taro-UI :1.1.1

（小程序）引入 AtActivityIndicator 组件报错

TypeError: Cannot read property 'replace' of null
    at buildSingleComponent (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1330:37)
    at buildSingleComponent (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1388:20)
    at buildSingleComponent (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1388:20)
    at Promise.all.componentPathList.map.componentObj (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1295:60)
    at Array.map (<anonymous>)
    at buildDepComponents (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1295:40)
    at buildSinglePage (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1136:40)
    at process._tickCallback (internal/process/next_tick.js:68:7)
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
    at assertPath (path.js:39:11)
    at Object.relative (path.js:1173:5)
    at pageDepComponents.forEach.depComponent (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1150:64)
    at Array.forEach (<anonymous>)
    at componentMap.forEach.component (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1144:31)
    at Array.forEach (<anonymous>)
    at realComponentsPathList.forEach.component (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1143:24)
    at Array.forEach (<anonymous>)
    at buildSinglePage (/Users/kenberkeley/Desktop/my-project/node_modules/_@[email protected]@@tarojs/cli/src/weapp.js:1140:30)
    at process._tickCallback (internal/process/next_tick.js:68:7)

建议：Drawer像FloatLayout一样支持children

希望Drawer能支持自定义内容区

AtCard 的 onClick 无法使用继承的组件 function

parent 组件的 cardClick 没有被调用。
parent 和 child 组件代码 请参见 NervJS/taro#563
taro 已经修正了这个bug，taro-ui 这边是否需要更新？

依赖的版本号

node: v8.9.3
taro:1.0.0-beta.25
taro-ui: 1.1.5

相关链接

NervJS/taro#563