当前位置: 首页 > 软件库 > 程序开发 > UI组件库 >

Taro UI

基于 Taro 的多端 UI 组件库
授权协议 MIT
开发语言 JavaScript
所属分类 程序开发、 UI组件库
软件类型 开源软件
地区 国产
投 递 者 养焱
操作系统 跨平台
开源组织 京东
适用人群 未知
 软件概览

Taro UI 是由凹凸实验室推出的一款基于 Taro 框架开发的多端 UI 组件库。

特性

  • 基于 Taro 开发 UI 组件

  • 一套组件可以在 微信小程序H5ReactNative 等多端适配运行

  • 提供友好的 API,可灵活的使用组件

Taro UI 的第一版组件共有六个模块、三十三个组件,并在持续添加中:

安装

需要安装 Taro 开发工具 @tarojs/cliTaro 版本需要在 1.0.0-beta.18 以上

npm install -g @tarojs/cli

 

然后在项目中安装 Taro UI

npm install taro-ui

 

使用

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

import { AtButton } from 'taro-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 框架 Taro 是一个跨端跨框架的解决方案,Taro 框架也包含了丰富的组件库,比较常用的就是 表单组件。 一般在pc 端的系统中最常用的标签就是<dev> 而在小程序中使用的是<View> 标签 还有文本标签<Text> 但是在React中,我们要使用Taro 就要先引入才能使用 import { View, Text } from '@tarojs/components' impo

  • 开门见山,AtModal中有三个组件TaroUI官网中没有过多说明,只是一笔带过,但其实是有些小坑的 分别是<AtModalHeader>、<AtModalContent>、<AtModalAction> 一定注意:在使用这三个组件时,不可以配置AtModal组件中的content属性!配置了之后这三个组件会失效!!以及confirmText等属性配置会无效 三个组件的使用都大同小异,使用方法:

  • confirm确认对话框 一、原因 Taro UI 中的Modal对话框组件限制太多,且没有confirm确认对话框,部分场景使用起来受限太多,代码写起来不太舒服,就简单做一下二次封装 第一种标签太长,第二种content限制太大,做一下简单的二次封装是必要的(功能可后续按需拓展) <AtModal isOpened> <AtModalHeader>标题</AtModalHeader> <

  • 1. taro 安装: 参考taro官网; 安装cli工具: #使用 npm 安装 CLI npm install -g @tarojs/cli  注意,安装过程出现sass相关的安装错误,请在安装mirror-config-china后重试:  npm install -g mirror-config-china 项目初始化 taro init myApp    注意,初始化项目中如果有依赖安

  • 前提:其实这个很久之前就想写了,但是因为最近一直在搞vue3,就拖到现在了。Taro UI对表单的验证不是很友好,所以写了个表单组件,涵盖验证功能 一、安装async-validator(其实是用了async-validator这个依赖) npm install async-validator -s 二、引入async-validator,封个校验方法(validate.ts) import Sc

  • 自定义 taro ui 的样式,可以修改一下它的变量的值,然后再重新编译一下就行了 ... Taro UI 的默认的变量是在 node_modules .. taro-ui .. dist .. style 下面的 variables 这个目录里面,打开 default.scss .. 先复制一下这些变量的值 .. 然后在项目的 src .. assets .. styles 下面,新建一个文件

  • 子组件: /** * 评分组件 */ import { View, Textarea, Image } from "@tarojs/components" import styles from './index.module.less' import { AtRate } from 'taro-ui'; import { AtFloatLayout } from "taro-ui"; impo

  • [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题 参考文章: (1)[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题 (2)https://www.cnblogs.com/wukong1688/p/11233244.html (3)https://www.codeprj.com/blog/ab67dc1.html 备忘一下

  • 其实修改ui框架的样式还是很容易碰见的,但是每个框架处理的方式可能还有点不太一样, taro编译出来的小程序样式。 addGlobalClass 添加这个 只能让我们修改页面中的taro-ui 样式 但是在自定义的组件中 怎么修改呢 其实也简单, 首先taro-ui中修改样式 我们直接找到那个 类名进行覆盖就行了, 注意 不是在组件的样式文件中, 是必须在page页面的样式文件中进行样式覆盖 /*

  • 前言:改方案使用react和typescript,不需要安装sass的loader 1、安装alpha版本     "taro-ui": "^3.0.0-alpha" 2、在app.ts里面引入全局样式     import 'taro-ui/dist/style/index.scss' 3、直接使用UI组件     import { AtButton } from 'taro-ui'

 相关资料
  • Canvas 组件参考 UITransform 组件参考 Widget 组件参考 Button 组件参考 Layout 组件参考 EditBox 组件参考 ScrollView 组件参考 ScrollBar 组件参考 ProgressBar 组件参考 LabelOutline 组件参考 Toggle 组件参考 UIMeshRenderer 组件参考 ToggleGroup 组件参考 Slider

  • 如果您在声明组件时更喜欢基于类的 API,则可以使用官方维护的vue-class-component装饰器: import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里 template:

  • 这看起来很容易,但却不知道该怎么做。当前数组数据是按日期和日期列出的,因此我需要将所有日期组合起来:天、月、6个月、1年。我需要将数组数据排列为下面的第二个数组。

  • 本文向大家介绍基于AngularJS前端云组件最佳实践,包括了基于AngularJS前端云组件最佳实践的使用技巧和注意事项,需要的朋友参考一下 AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架。

  • 本文向大家介绍基于Springboot2.0构建ES的多客户端,包括了基于Springboot2.0构建ES的多客户端的使用技巧和注意事项,需要的朋友参考一下 有时候我们操作es的时候会有一些特殊的需求,例如需要操作的index使用了不同的es服务器、用户名、密码、参数等,这个时候我们需要使用不同的es的客户端进行操作,但是我们又不希望拆分成多个项目进行使用,这个时候我们就需要在我们的配置中自己构

  • UI 部件 & 组件工具 桌面 & 移动: Kendo UI [free to $] Webix [$] Semantic UI Metro UI Bootstrap Materialize Material UI Polymer Paper Elements 桌面 (NW.js 和 Electron): photonkit React UI Components for OS X El Capi