快速开始

Ting UI 是一套现代化的多平台UI组件库，基于新拟态设计风格，提供硅胶质感的视觉效果。支持 Web、微信小程序、APP 多平台使用，内置深色模式、响应式设计和无障碍访问支持。

特性

🌐 多平台支持 - 支持 Web、微信小程序、APP 三个平台
🎨 精美设计 - 硅胶质感视觉效果，柔和阴影创造立体感
🌓 深色模式 - 内置完善的深色模式支持
📱 响应式布局 - 全面支持移动端、平板、桌面端
⚡ 性能优化 - GPU加速动画，流畅的用户体验
♿ 无障碍支持 - 完整的ARIA属性支持
🎯 易于使用 - 现代化API设计，TypeScript类型支持
🔧 工程化 - Vite构建，ESLint代码规范，Vitest单元测试

安装

使用包管理器

npmyarnpnpm

bash

npm install ting-ui

bash

yarn add ting-ui

bash

pnpm add ting-ui

使用 CDN

html

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/ting-ui/src/tingui.css">

<!-- JS -->
<script src="https://unpkg.com/ting-ui/src/js/tingui.js"></script>

基本用法

完整引入

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ting UI 示例</title>
  <!-- 引入 CSS -->
  <link rel="stylesheet" href="node_modules/ting-ui/dist/tingui.css">
</head>
<body>
  <!-- 使用按钮组件 -->
  <button class="t-button">默认按钮</button>
  <button class="t-button t-button--primary">主要按钮</button>
  <button class="t-button t-button--success">成功按钮</button>
  
  <!-- 使用 Radio 组件 -->
  <label class="t-radio">
    <input type="radio" name="radio-basic" value="1" class="t-radio__input" checked>
    <span class="t-radio__inner"></span>
    <span class="t-radio__label">备选项1</span>
  </label>
  
  <!-- 使用 Checkbox 组件 -->
  <label class="t-checkbox">
    <input type="checkbox" class="t-checkbox__input" checked>
    <span class="t-checkbox__inner"></span>
    <span class="t-checkbox__label">备选项1</span>
  </label>
  
  <!-- 引入 JS -->
  <script src="node_modules/ting-ui/dist/tingui.umd.js"></script>
  <script>
    // 初始化组件
    TingUI.init();
  </script>
</body>
</html>

按需引入样式

如果只需要部分组件的样式，可以单独引入：

html

<!-- 基础变量和工具类 -->
<link rel="stylesheet" href="node_modules/ting-ui/dist/tingui.css">

<!-- 响应式样式（可选） -->
<link rel="stylesheet" href="node_modules/ting-ui/dist/tingui-responsive.css">

<!-- 性能优化样式（可选） -->
<link rel="stylesheet" href="node_modules/ting-ui/dist/tingui-performance.css">

多平台使用

Web 平台

javascript

// ES Module 引入
import TingUI from 'tingui';

// 初始化组件
TingUI.init();

// 获取当前平台
const platform = TingUI.getPlatform(); // 'web'

// 创建组件实例
const radio = new TingUI.Components.Radio('radio');
radio.init();

微信小程序平台

javascript

// 小程序中使用
import TingUI from 'tingui';

// 手动设置平台
TingUI.setPlatform('wechat');

// 初始化组件
TingUI.init();

APP 平台

javascript

// APP中使用
import TingUI from 'tingui';

// 手动设置平台
TingUI.setPlatform('app');

// 初始化组件
TingUI.init();

TypeScript 支持

typescript

import TingUI, { Radio, Checkbox } from 'tingui';

// 创建组件实例
const radio = new Radio('radio');
const checkbox = new Checkbox('checkbox');

// 初始化组件
radio.init();
checkbox.init();

// 使用组件方法
radio.selectButton(buttonElement, 'groupName');
checkbox.toggleButton(buttonElement);

第一个示例

创建一个简单的登录表单：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录示例</title>
  <link rel="stylesheet" href="node_modules/ting-ui/dist/tingui.css">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background-color: var(--t-bg);
    }
    .login-form {
      width: 100%;
      max-width: 400px;
      padding: 40px;
    }
  </style>
</head>
<body>
  <div class="t-card login-form">
    <h2 class="t-card__title" style="text-align: center; margin-bottom: 30px;">用户登录</h2>
    
    <div class="t-form-item">
      <label class="t-form-item__label">用户名</label>
      <div class="t-form-item__content">
        <div class="t-input">
          <input type="text" placeholder="请输入用户名" class="t-input__inner">
        </div>
      </div>
    </div>
    
    <div class="t-form-item">
      <label class="t-form-item__label">密码</label>
      <div class="t-form-item__content">
        <div class="t-input">
          <input type="password" placeholder="请输入密码" class="t-input__inner">
        </div>
      </div>
    </div>
    
    <div class="t-form-item">
      <label class="t-checkbox">
        <input type="checkbox" class="t-checkbox__input">
        <span class="t-checkbox__inner"></span>
        <span class="t-checkbox__label">记住我</span>
      </label>
    </div>
    
    <button class="t-button t-button--primary" style="width: 100%;">
      登录
    </button>
  </div>
  
  <script src="node_modules/ting-ui/dist/tingui.umd.js"></script>
  <script>
    // 初始化组件
    TingUI.init();
  </script>
</body>
</html>

浏览器支持

浏览器	版本
Chrome	80+
Firefox	75+
Safari	13+
Edge	80+
IE	不支持

快速开始 ​

特性 ​

安装 ​

使用包管理器 ​

使用 CDN ​

基本用法 ​

完整引入 ​

按需引入样式 ​

多平台使用 ​

Web 平台 ​

微信小程序平台 ​

APP 平台 ​

TypeScript 支持 ​

第一个示例 ​

浏览器支持 ​

下一步 ​

快速开始

特性

安装

使用包管理器

使用 CDN

基本用法

完整引入

按需引入样式

多平台使用

Web 平台

微信小程序平台

APP 平台

TypeScript 支持

第一个示例

浏览器支持

下一步