分享一款高颜值强大的uniapp组件库-图鸟组件库

图鸟UI是一套基于uni-app的组件库提供了丰富的UI组件和完整的页面模板可以帮你快速搭建小程序、H5或App。下面整理了官方模板和社区资源的入口方便你直接选用。 官方模板系列图鸟官方提供了多种场景的完整模板基本都是纯前端实现拿来就能用圈子商圈功能超全的社区模板。包含自定义tabbar、全局搜索、热点资讯、圈子发布、商家中心、积分商城、地图打卡等 。社区博客适合内容社区的模板。侧重于资讯和社交互动界面风格统一 。企业官网快速搭建品牌官网。包含资讯、用户中心、商品管理等模块支持多平台适配 。游戏社区带社交属性的游戏类模板。界面风格更活泼 。AI数字人基于Vue3的智能交互模板。集成了AI数字人对话功能比较有科技感 。大部分官方模板基于 Vue2部分新模板如AI数字人基于 Vue3。下载前记得确认一下自己的技术栈是否匹配开源项目地址-插件市场[庆祝][庆祝]https://ext.dcloud.net.cn/publisher?id356088图鸟模板市场https://templatemarket.tuniaokj.com/图鸟社区pc打开才有显示图片素材资源https://www.yuque.com/tuniao使用文档https://vue2.tuniaokj.com/使用文档备份https://docs.ahuaaa.cn/图鸟UI快速搭建uniapp项目、组件按需引入视频教程4分钟https://www.bilibili.com/video/BV1Se411F7du/图鸟UI-开源项目截图https://lanhuapp.com/link/#/invite?sidlX0tGl4t图鸟icon插件市场下载https://tnicon.tuniaokj.com/https://icon.ahuaaa.cn/兔兔找图前后端项目https://ext.dcloud.net.cn/plugin?id12006快速开发框架集成图鸟UI、z-paging、animate.css、lodash.js https://ext.dcloud.net.cn/plugin?id10298图鸟轮播uni_modules组件https://ext.dcloud.net.cn/publisher?id1174931图鸟vue3线上正式版vue3 uni_modules 插件市场https://ext.dcloud.net.cn/plugin?nametuniaoui-vue3vue3感恩starhttps://github.com/tuniaoTech/tuniaoui-rc-vue3-uniappvue3演示代码https://github.com/tuniaoTech/tuniaoui-uniapp-v3-demo使用文档https://vue3.tuniaokj.com/图鸟模板-官网企业官网是基于 图鸟UI 进行开发的纯前端模板支持微信小程序、APP和H5。游戏社区-UI组件库图鸟模板-壁纸壁纸是基于 图鸟UI 进行开发的纯前端模板支持微信小程序、APP和H5。图鸟模板-社区社区博客是基于 图鸟UI 进行开发的纯前端模板支持微信小程序、APP和H5。图鸟模板-资讯资讯名片是基于 图鸟UI 进行开发的纯前端模板支持微信小程序、APP和H5。作者开源了相当多优秀的模板喜欢的赶紧下载吧。https://ext.dcloud.net.cn/publisher?id356088简单例子参照template view classcontainer !-- 使用图鸟UI的卡片组件 tn-card -- tn-card title用户登录 :shadowtrue !-- 使用图鸟UI的输入框组件 tn-input -- tn-input v-modelusername placeholder请输入用户名 :clearabletrue !-- 插槽在输入框左侧放置一个图标 -- view slotleft tn-icon nameaccount size40/tn-icon /view /tn-input tn-input v-modelpassword placeholder请输入密码 :passwordtrue :clearabletrue view slotleft tn-icon namelock size40/tn-icon /view /tn-input !-- 使用图鸟UI的按钮组件 tn-button -- tn-button typesuccess :blocktrue clickhandleLogin登 录/tn-button !-- 使用图鸟UI的布局组件tn-row/tn-col实现文字链接 -- tn-row justify-contentspace-between stylemargin-top: 20rpx; tn-col span12 tn-button typetext sizesm clickhandleRegister注册账号/tn-button /tn-col tn-col span12 styletext-align: right; tn-button typetext sizesm clickhandleForgot忘记密码/tn-button /tn-col /tn-row /tn-card /view /template script export default { data() { return { username: , password: } }, methods: { handleLogin() { console.log(登录, this.username, this.password) uni.showToast({ title: 登录成功, icon: success }) }, handleRegister() { console.log(跳转到注册页面) }, handleForgot() { console.log(跳转到找回密码页面) } } } /script style scoped .container { padding: 30rpx; background-color: #f5f5f5; min-height: 100vh; } /style