图鸟UI组件大全

图鸟UI（Tuniao UI）是一款基于 Vue3 + UniApp 开发的跨平台UI框架，支持微信小程序、H5、App等多端适配，以酷炫风格、丰富组件和免费商用为核心优势。以下是其核心组件分类及功能详解：

 一、基础布局与样式组件

1. 布局系统

   • Flex/Grid布局：提供响应式栅格系统，支持多端自适应。

   • 浮动布局：简化元素定位，适配复杂页面结构。

2. 主题与配色

   • 4种色深模式（深色/浅色/渐变等）+ 4套渐变配色方案（如gradient__cool-1、gradient__teal）。

   • 支持动态主题切换，通过type属性快速应用主题色（primary/success等）。

3. 图标库（TnIcon）

   • 700+统一风格图标，支持自定义颜色、大小及偏移量。

   • 图片图标支持：可嵌入本地或网络图片作为图标。

📝 二、表单与交互组件

1. 输入控件

   • 支持文本、密码、数字、日期等多种输入类型，内置实时校验。

   • 表单分组与标签联动，提升数据收集效率。

2. 选择器与开关

   • 多选框/单选框组、滑块（Slider）、开关（Switch）等。

3. 按钮与操作

   • 多样化按钮（填充/边框/文字按钮），支持加载状态与图标组合。

🖼️ 三、数据展示组件

1. 多媒体展示

   • 幻灯片（TnSlideShow）：轮播图组件，支持自动播放、点击事件与自定义尺寸。

   • 图片裁剪（TnImageCrop）：

     • 支持圆形/矩形裁剪框，可调边框颜色与缩放比例。

     • 通过save()方法导出Base64或临时路径。

2. 列表与瀑布流

   • 虚拟列表：优化长列表渲染性能，支持下拉刷新与分页。

   • 瀑布流布局：自适应排列图片/文本，支持横向/纵向滚动与间距调整。

3. 信息卡片

   • 商品卡片、通知卡片、数据统计卡片，内置多种样式模板。

🧭 四、导航与结构组件

1. 导航栏

   • 顶部导航栏（支持沉浸式）、底部导航（TabBar），可自定义图标与标签。

2. 弹窗与遮罩

   • 模态框（Modal）、动作菜单（ActionSheet）、消息提示（Toast）。

3. 抽屉与侧边栏

   • 左右滑动抽屉菜单，支持嵌套复杂内容。

🎯 五、特色功能组件

1. 抽奖组件

   • 转盘抽奖、九宫格等互动形式，内置动画与奖品配置。

2. 图表与数据可视化

   • 简易折线图/饼图组件，适配移动端数据展示需求。

3. 动画效果

   • 内置过渡动画（渐显/滑动），支持自定义动画库集成。

📚 六、页面模板与行业解决方案

图鸟提供 8套完整行业模板，开箱即用：

1. 电商类：品牌商城、盲盒商城。

2. 企业类：OA办公、企业官网。

3. 社交类：社区博客、圈子商圈。

4. 工具类：资讯名片、壁纸小程序。

💡 所有模板支持 免费商用（Apache协议），会员版额外提供高级模板。

⚙️ 七、使用指南

💎 总结与资源

• 优势：风格统一、跨端支持、开源免费，大幅降低多端开发成本。

• 学习资源：

  • 官方文档

  • GitHub仓库

  • 社区模板下载。

无论是基础组件还是行业模板，图鸟UI均以 “一次开发，多端部署” 为核心，助力开发者高效构建高品质应用 🌟。