更新记录

1.2.1（2026-02-07） 下载此版本

ChatInput 组件新增 fixed 属性，支持固定在底部 ChatInput 组件新增 safeArea 属性，支持适配手机底部安全区 ChatInput 演示页面新增底部固定案例

1.2.0（2026-02-06） 下载此版本

ChatInput 组件新增 fixed 属性，支持固定在底部 ChatInput 组件新增 safeArea 属性，支持适配手机底部安全区 ChatInput 演示页面新增底部固定案例

1.1.0（2026-02-06） 下载此版本

平台兼容性

uni-app x(3.96)

其他

TX-UI Demo

TX-UI 组件库演示项目，展示所有组件的使用方法和效果。

• 📖 在线文档: http://txui.aypkq.com/#/

环境要求

• Node.js >= 16
• HBuilderX >= 3.96
• pnpm / npm / yarn

安装依赖

npm install
# 或
pnpm install

运行项目

Web 端

使用 HBuilderX 打开项目，点击运行 → 运行到浏览器

App 端

使用 HBuilderX 打开项目，点击运行 → 运行到手机或模拟器

小程序端

使用 HBuilderX 打开项目，点击运行 → 运行到小程序模拟器

项目结构

demo/
├── pages/                    # 页面目录
│   ├── index/               # 首页相关
│   │   ├── home.uvue        # 首页 - 组件库介绍
│   │   ├── components.uvue  # 组件列表页
│   │   └── api.uvue         # API 列表页
│   ├── components/          # 组件演示页面
│   │   ├── button.uvue      # 按钮组件演示
│   │   ├── icon.uvue        # 图标组件演示
│   │   └── ...              # 其他组件演示
│   ├── templates/           # 模板页面
│   │   ├── index.uvue       # 模板列表
│   │   ├── login.uvue       # 登录模板
│   │   └── ...              # 其他模板
│   └── api/                 # API 详情页
│       └── detail.uvue      # API 详情
├── uni_modules/             # uni_modules 目录
│   └── tx-ui/               # TX-UI 组件库
├── static/                  # 静态资源
├── plugins/                 # 插件
├── config/                  # 配置文件
├── App.uvue                 # 应用入口
├── main.uts                 # 主入口文件
├── pages.json               # 页面配置
├── manifest.json            # 应用配置
├── vite.config.ts           # Vite 配置
└── package.json             # 项目依赖

组件使用示例

基础用法

<template>
  <view>
    <!-- 按钮 -->
    <tx-button type="primary">主要按钮</tx-button>

    <!-- 图标 -->
    <tx-icon name="home-4" size="24" color="#4F46E5" />

    <!-- 输入框 -->
    <tx-input v-model="value" placeholder="请输入" />
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value = ref('')
</script>

表单组件

<template>
  <tx-form ref="formRef" :model="form" :rules="rules">
    <tx-form-item label="用户名" prop="username">
      <tx-input v-model="form.username" />
    </tx-form-item>
    <tx-form-item label="密码" prop="password">
      <tx-input v-model="form.password" type="password" />
    </tx-form-item>
    <tx-button type="primary" @click="submit">提交</tx-button>
  </tx-form>
</template>

反馈组件

<script setup lang="uts">
// Toast 提示
uni.showToast({ title: '操作成功', icon: 'success' })

// Dialog 对话框
// 使用 tx-dialog 组件
</script>

主题配置

项目使用 Indigo 色系作为主色调：

相关链接

• TX-UI 在线文档
• uni-app x 官方文档

许可证

MIT License