Taro-ui 常用 UI 组件库说明
https://taro-ui.jd.com/#/docs/introduction
安装
npm install -g @tarojs/cli
taro init myAppcd myApp
npm install taro-ui
在 taro 项目的 config/index.js 中新增如下配置项：
h5: {
esnextModules: ['taro-ui']
}
样式文件，支持全部引入，或者按需加载
import 'taro-ui/dist/style/index.scss'
@import "~taro-ui/dist/style/index.scss";
注意： 这个 UI 库使用使用 scss 预处理样式和 TS 语法，所以原来的项目也需要改成 TS + SCSS，否则项目无法正常导入运行(报错语法不正确)。所以现在需要重构一下项目。
Icon图标
两种方式使用
<View className='at-icon at-icon-settings'></View>
import { AtIcon } from 'taro-ui'
@import "~taro-ui/dist/style/components/icon.scss";
<AtIcon value='clock' size='30' color='#F00'></AtIcon>主要的图标有几十个(图标示例)基本够用
也支持第三方的 font-awesome 库
Button按钮
import { AtButton } from 'taro-ui'
@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/loading.scss";
<AtButton>按钮文案</AtButton>
<AtButton type='primary' size='small'>按钮文案</AtButton>
<AtButton type='secondary' size='normal'>按钮文案</AtButton>
<AtButton loading type='primary'>按钮文案</AtButton>Fab浮动按钮
浮动悬浮按钮
import { AtFab } from 'taro-ui'
@import "~taro-ui/dist/style/components/fab.scss";
<AtFab onClick={this.onButtonClick.bind(this)}>
<Text className='at-fab__icon at-icon at-icon-menu'></Text>
</AtFab>Avatar头像
import { AtAvatar } from 'taro-ui'
@import "~taro-ui/dist/style/components/avatar.scss";
<AtAvatar circle image='https://jdc.jd.com/img/200'></AtAvatar>Article文章样式
@import "~taro-ui/dist/style/components/article.scss";
<View className='at-article'>
<View className='at-article__h1'>
这是一级标题这是一级标题
</View>
<View className='at-article__info'>
2017-05-07 这是作者
</View>
<View className='at-article__content'>
<View className='at-article__section'>
<View className='at-article__h2'>这是二级标题</View>
<View className='at-article__h3'>这是三级标题</View>
<View className='at-article__p'>
这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ
</View>
<View className='at-article__p'>
这是文本段落。这是文本段落。
</View>
<Image
className='at-article__img'
src='https://jdc.jd.com/img/400x400'
mode='widthFix' />
</View>
</View>
</View>.at-article /* 根类名 */
.at-article__h1 /* 一级标题 */
.at-article__h2 /* 二级标题 */
.at-article__h3 /* 三级标题 */
.at-article__info /* 作者信息 */
.at-article__p /* 段落 */
.at-article__img /* 图片 */
Badge徽标
Countdown倒计时
Curtain幕帘
LoadMore页面提示
Noticebar通告栏
用于展示一行或多行通告文字。
import { AtNoticebar } from 'taro-ui'
<AtNoticebar>这是 NoticeBar 通告栏</AtNoticebar>
<AtNoticebar icon='volume-plus'>
这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
</AtNoticebar>
<AtNoticebar marquee>
滚动：这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
</AtNoticebar>Tag标签
用于展示1个或多个文字标签，可点击切换选中、不选中的状态。文章来源：https://www.toymoban.com/news/detail-468078.html
import { AtTag } from 'taro-ui'
<AtTag>标签</AtTag>
<AtTag type='primary' circle>标签</AtTag>
<AtTag size='small'>标签</AtTag>Timeline时间轴
Swiper滑动视图容器
滑块视图容器，常用于走马灯、轮播图文章来源地址https://www.toymoban.com/news/detail-468078.html
import { Swiper, SwiperItem } from '@tarojs/components'
import Taro, { Component } from '@tarojs/taro'
// 引入 Swiper, SwiperItem 组件
import { Swiper, SwiperItem } from '@tarojs/components'
class App extends Component {
render () {
return (
<Swiper
className='test-h'
indicatorColor='#999'
indicatorActiveColor='#333'
vertical
circular
indicatorDots
autoplay>
<SwiperItem>
<View className='demo-text-1'>1</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-2'>2</View>
</SwiperItem>
<SwiperItem>
<View className='demo-text-3'>3</View>
</SwiperItem>
</Swiper>
)
}
}Divider分隔符
import { AtDivider } from 'taro-ui'
<AtDivider content='分割线' />Steps步骤条
ActionSheet动作面板
import { AtActionSheet, AtActionSheetItem } from "taro-ui"
<AtActionSheet isOpened cancelText='取消' title='头部标题可以用通过转义字符换行'>
<AtActionSheetItem onClick={ this.handleClick }>
按钮一
</AtActionSheetItem>
<AtActionSheetItem>
按钮二
</AtActionSheetItem>
</AtActionSheet>ActivityIndicator活动指示器
Modal模态框
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"
<AtModal isOpened>
<AtModalHeader>标题</AtModalHeader>
<AtModalContent>
这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室
这里是正文内容，欢迎加入京东凹凸实验室
</AtModalContent>
<AtModalAction> <Button>取消</Button> <Button>确定</Button> </AtModalAction>
</AtModal>
<AtModal
isOpened
title='标题'
cancelText='取消'
confirmText='确认'
onClose={ this.handleClose }
onCancel={ this.handleCancel }
onConfirm={ this.handleConfirm }
content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
/>
