Taro-ui 常用 UI 组件库说明

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图标

两种方式使用

import { AtIcon } from 'taro-ui'
@import "~taro-ui/dist/style/components/icon.scss";

主要的图标有几十个(图标示例)基本够用

也支持第三方的 font-awesome 库

Button按钮

import { AtButton } from 'taro-ui'

@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/loading.scss";

按钮文案
按钮文案
按钮文案
按钮文案

Fab浮动按钮

浮动悬浮按钮

import { AtFab } from 'taro-ui'
@import "~taro-ui/dist/style/components/fab.scss";


  

Avatar头像

import { AtAvatar } from 'taro-ui'
@import "~taro-ui/dist/style/components/avatar.scss";

Article文章样式

@import "~taro-ui/dist/style/components/article.scss";


  
    这是一级标题这是一级标题
  
  
    2017-05-07   这是作者
  
  
    
      这是二级标题
      这是三级标题
      
        这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本段落。这是文本落。这是文本段落。1234567890123456789012345678901234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZ
      
      
        这是文本段落。这是文本段落。
      
      
    
  

.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'

这是 NoticeBar 通告栏


  这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏



  滚动：这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏

Tag标签

用于展示1个或多个文字标签，可点击切换选中、不选中的状态。

import { AtTag } from 'taro-ui'

标签
标签
标签

Timeline时间轴

Swiper滑动视图容器

滑块视图容器，常用于走马灯、轮播图

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 (
      
        
          1
        
        
          2
        
        
          3
        
      
    )
  }
}

Divider分隔符

import { AtDivider } from 'taro-ui'

Steps步骤条

ActionSheet动作面板

import { AtActionSheet, AtActionSheetItem } from "taro-ui"


  
    按钮一
  
  
    按钮二
  

ActivityIndicator活动指示器

Modal模态框

import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"



  标题
  
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
  
   取消 确定 

Progress进度条

Toast轻提示

SwipeAction滑动操作

Message消息通知

Form表单

Input输入框

InputNumber数字输入框

Radio单选按钮

Checkbox多选框

Rate评分

Switch开关

Textarea多行文本框

Picker选择器

SearchBar搜索栏

Slider滑动条

ImagePicker图片选择器

Range范围选择器

Flex弹性布局

Grid栅格布局

List列表

Card卡片

FloatLayout浮动弹层

Accordion手风琴

NavBar导航栏

TabBar标签栏

Tabs标签页

SegmentedControl分段器

Pagination分页器

Drawer抽屉

Indexes索引选择器

Calendar日历