当前位置: 首页 > 工具软件 > Taro UI > 使用案例 >

Taro-ui 常用 UI 组件库说明

阎知
2023-12-01

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&nbsp;&nbsp;&nbsp;这是作者
  </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个或多个文字标签,可点击切换选中、不选中的状态。

import { AtTag } from 'taro-ui'

<AtTag>标签</AtTag>
<AtTag type='primary' circle>标签</AtTag>
<AtTag size='small'>标签</AtTag>

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 (
      <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活动指示器

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欢迎加入京东凹凸实验室'
/>

Progress进度条

Toast轻提示

SwipeAction滑动操作

Message消息通知

Form表单

Input输入框

InputNumber数字输入框

Radio单选按钮

Checkbox多选框

Rate评分

Switch开关

Textarea多行文本框

Picker选择器

Slider滑动条

ImagePicker图片选择器

Range范围选择器

Flex弹性布局

Grid栅格布局

List列表

Card卡片

FloatLayout浮动弹层

Accordion手风琴

TabBar标签栏

Tabs标签页

SegmentedControl分段器

Pagination分页器

Drawer抽屉

Indexes索引选择器

Calendar日历

 类似资料: