图鸟生态

插件市场已上架的官方项目均免费开源并可商用,覆盖 UI、模板、图表与多技术栈能力,帮助团队更快交付。

图鸟生态 · 工程框架

图鸟快速开发框架

开箱即用的项目结构与开发约定,内置常用能力与最佳实践,帮助团队更快启动与稳定交付。

图鸟快速开发框架

图鸟生态 · 应用模板

兔兔答题刷题

题库结构、练习模式、错题本与进度统计一套齐全,适合做教育训练、考试测评与学习打卡类应用。

兔兔答题刷题

图鸟生态 · 行业模板

海狐外卖

覆盖用户下单、商家管理、配送流转等关键页面与交互,面向本地生活/餐饮场景快速落地业务原型。

海狐外卖

图鸟生态 · 可视化能力

uCharts 图表

常用业务图表开箱即用,折线/柱状/饼图等组件与布局案例齐备,适合看板、报表与数据运营场景。

uCharts 图表

图鸟生态 · 登录能力

微信授权登录 · Vue3

标准化授权流程与页面结构,减少接入成本与踩坑时间,适用于 H5/小程序/多端的登录场景。

微信授权登录 · Vue3

图鸟生态 · 业务组件

jojo-poster海报分享

支持自定义海报内容与样式,可嵌入到 H5/小程序/多端应用,适用于活动分享、商品推广等场景。

jojo-poster海报分享

组件预览

TuniaoUI 组件库预览,包含基础组件、表单组件、反馈组件等多种类型的 UI 组件。

ActionSheet 操作菜单

actionSheet

此组件从底部弹出操作菜单,供用户选中并返回选中结果。

Avatar 头像

avatar

当前组件可以使用图标、文字、图片的形式给用户展示数据。

Badge 徽标

badge

该组件一般用于图标右上角显示未读的消息数量,提示用户点击,有圆点和圆包含文字两种形式。

Button 按钮

button

该组件内部实现以uni-app`button`组件为基础,进行了二次封装。

Calendar 日历

calendar

此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。

Checkbox 复选框

checkbox

复选框组件一般用于需要多个选择的场景。该组件功能完整,使用方便。

CircleProgress 圆形进度条

circle_progress

用于展示进度信息,是一个圆形进度条。

Code 验证码倒计时

code

考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件

CodeInput 验证码输入

codeInput

该组件一般用于验证用户短信验证码的场景,也可以结合TuniaoUI的[键盘组件](keyboard.md)使用

Collapse 折叠面板

collapse

通过折叠面板收纳内容区域

Color 色彩

color

TuniaoUI进过大量的调试和研究,得出一套专有的调色板,在各个组件内部,使用统一的配色,可以为产品带来统一又鲜明的视觉效果。

内置样式

common

暂无描述

CountScroll 数字滚动

count-scroll

该组件可以让数字滚动到指定的数值。

CountDown 倒计时

countDown

该组件一般使用于某个活动的截止时间上,通过数字的变化,给用户明确的时间感受,提示用户进行某一个行为操作。

CountTo 数字跳转

countTo

该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。

Empty 内容为空

empty

该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景,

Form 表单

forms

此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。

GoodsNav 商品导航

goodsNav

暂无描述

Grid 宫格布局

grid

宫格组件一般用于同时展示多个同类项目的场景,可以给宫格的项目设置徽标组件([badge](badge.md)),或者图标等,也可以扩展为左右滑动的轮播形式。

Icon 图标

icon

TuniaoUI使用了基于字体的图标集,包含了大多数场景常见的图标。

Input 输入框

input

此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件[tn-form](forms.md)而设计的,利用它可以快速实现表单验证,输入内容,下拉选择等功能。

Keyboard 键盘

keyboard

该组件为TuniaoUI自定义的键盘面板,内置了数字键盘,车牌号码,身份证3种模式,都有可以打乱按键顺序的选项。

Flex布局

layout

如需实现类似宫格的布局,请使用TuniaoUI的[Grid宫格组件](grid.md),可以设置点击效果、列数、对齐方式等,功能更完善和灵活

LineProgress 线形进度条

lineProgress

用于展示进度信息,是一个线性进度条。

IndexList索引列表

list

该组件为高性能列表组件

List 列表Item

list_cell

该组件可以单独使用,也可以配合`tn-list-view`使用创建列表容器,同一个管理同一个容器中的列表。

List 列表容器

list_view

用于存放`tn-list-item`列表组件,实现统一管理列表组件。方便管理列表的顶部和边框等信息。

LoadMore 加载更多

loadMore

此组件一般用于标识页面底部加载数据时的状态

Loading 加载动画

loadingIcon

该组件为loading的一个小动画,主要为其他组件显示正在加载信息的场景服务。

Modal 模态框

modal

弹出模态框,常用于消息提示、消息确认、在当前页面内完成特定的交互操作。

NavBar 自定义顶部导航栏

navbar

在由于右侧的演示是通过iframe引入的,PC端可能无法显示正常效果,请在真机演示中查看效果。

NoticeBar 通知栏

noticeBar

该组件用于滚动通告场景,有多种模式可供选择

NumberBox 步进器

numberBox

该组件一般用于数量设置的场景。

Picker 选择器

picker

该组件有四种弹出模式:

Popup 弹出层

popup

弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义。

Radio 单选框

radio

单选框组件一般用于只有一个选择的场景。

Rate 评分器

rate

该组件一般用于表单中,手动选择一个区间范围的场景。

ReadMore 查看更多

readMore

该组件一般用于内容较长,预先收起一部分,点击展开全部内容的场景。

ScrollList 横向滚动

scrollList

在由于右侧的演示是通过iframe引入的,PC端无法正常操作,请在真机演示中查看效果。

Select 列选择器

select

此选择器用于单列,多列,多列联动的选择场景。

SignBoard 签名板

sign_board

该组件会显示在当前页面上,不需要开发者再次编写多一个页面。

Skeleton 骨架屏

skeleton

骨架屏一般用于页面在请求远程数据尚未完成时,页面用灰色块预显示本来的页面结构,给用户更好的体验。

Slider 滑动选择器

slider

该组件一般用于表单中,手动选择一个区间范围的场景。

Steps 步骤条

steps

该组件一般用于完成一个任务要分几个步骤,标识目前处于第几步的场景。

Sticky 吸顶

sticky

该组件内部实现以uni-app`button`组件为基础,进行了二次封装。

Subsection 分段器

subsection

该分段器一般用于用户从几个选项中选择某一个的场景

SwipeAction 滑动单元格

swipeAction

该组件内部实现以uni-app`button`组件为基础,进行了二次封装,一般用于左滑唤出操作菜单的场景,用的最多的是左滑删除操作。

Swiper 轮播图

swiper

该组件一般用于导航轮播,广告展示等场景,可开箱即用,具有如下特点:

Switch 开关选择器

switch

选择开关一般用于只有两个选择,且只能选其一。

Tabbar 底部导航

tabbar

该组件有以下优缺点:

Tabs 标签选项卡

tabs

该组件,是一个tabs标签选项卡组件,在标签多的时候,可以配置为左右滑动(被激活的标签会自动滚动到中间),标签少的时候,可以禁止滑动。

TabsSwiper 全屏选项卡

tabs_swiper

该组件内部实现主要依托于uni-app`scroll-view`和`swiper`组件,主要特色是切换过程中,tabsSwiper文字的颜色可以渐变,底部滑块可以 跟随式滑动,活动tab滚动居中等。应用场景可以用于需要左右切换页面。

Tag 标签

tag

暂无描述

TimeLine 时间轴

time_line

该组件是配合`tn-time-line-item`配合使用。

Tips 警告消息

tips

此组件用户弹出文字提示信息,可以修改文字和背景颜色。

Toast 消息提示

toast

此组件的功能与`uni.showToast`API功能类似,不过相比于uni官方的有以下优点:

ImageUpload 图片上传

upload

该组件用于图片上传。