TusongUI - 暖色调前端 UI 框架演示

按钮组件

TusongUI 提供多种按钮样式，包括主要按钮、次要按钮、成功、危险、警告和信息按钮，以及不同尺寸的按钮。

基础按钮类型

按钮尺寸

带图标按钮

上传按钮

加载状态按钮

卡片组件

卡片是内容容器，具有悬停效果和阴影，适合展示分组信息。

基础卡片

这是一个基础卡片示例，展示了卡片的基本样式和悬停效果。

渐变卡片

这是一个渐变背景的卡片，适合突出显示重要信息。

带图标卡片

热门

这是一个带图标和徽章的卡片示例。

徽章组件

徽章用于标记状态、分类或突出显示信息，提供多种颜色类型。

徽章类型

成功警告危险主要信息次要

徽章应用示例

订单状态已完成处理中已取消

开关组件

开关用于切换状态，支持开/关两种状态，具有流畅的过渡动画。

开关示例

开启状态关闭状态

开关应用场景

启用通知

自动保存

深色模式

表单组件

表单组件包括输入框、选择框、文件上传等，具有统一的样式和交互效果。

文本输入框

数字输入框

日期选择框

下拉选择框

文件上传

多行文本框

模态框组件

模态框用于展示需要用户关注的内容，支持自定义标题、内容和操作按钮。

模态框示例

Toast 提示组件

Toast 用于显示短暂的消息提示，支持成功、错误、警告和信息四种类型，自动消失。

Toast 类型

自定义时长

确认对话框组件

确认对话框用于需要用户确认的操作，返回 Promise 对象，支持 async/await 语法。

确认对话框类型

使用示例（async/await）

点击按钮会弹出确认框，确认后显示成功提示，取消则显示取消提示。

表格组件

表格用于展示结构化数据，支持悬停效果和响应式设计。

编号	名称	状态	价格
#001	金毛犬	可售	¥3,500
#002	拉布拉多	预定	¥2,800
#003	柯基犬	已售	¥4,200
#004	边境牧羊犬	待定	¥5,000

照片网格组件

照片网格用于展示图片列表，支持网格布局和悬停效果。

注：带有橙色边框的照片表示封面图片（.is-cover 类）

数据卡片组件（移动端）

数据卡片用于移动端展示数据，替代表格显示，提供更好的触摸体验。

在桌面端显示表格，移动端自动切换为数据卡片视图（请在移动端或缩小浏览器窗口查看效果）。

宠物	编号	状态	操作
小黄	D-001	健康
小白	D-002	待检

TS

小黄

编号: D-001

健康

TS

小白

编号: D-002

待检

工具方法

TusongUI 提供一些实用的工具方法，如日期格式化、价格格式化等。

日期格式化


          TusongUI.formatDate('2024-01-15T10:30:00') → "2024-01-15"

价格格式化


          TusongUI.formatPrice(3500) → "¥3,500"

按钮加载状态


          TusongUI.setButtonLoading(btn, true/false)

TusongUI 组件演示

基础卡片

渐变卡片

带图标卡片