@creatoria/taro-ui

基于 Taro 框架的轻量级移动端组件库，专为微信小程序设计。

特性

• 50+ 高质量组件，覆盖移动端常见场景
• 基于 TypeScript 开发，提供完整的类型定义
• 支持 CSS 变量，轻松实现主题定制
• 支持按需引入，减少打包体积
• 详细的文档和示例

安装

# npm
npm install @creatoria/taro-ui

# yarn
yarn add @creatoria/taro-ui

# pnpm
pnpm add @creatoria/taro-ui

快速开始

引入样式

在 app.scss 中引入全局样式：

@import '@creatoria/taro-ui/dist/styles/index.css';

使用组件

import { Button, Toast } from '@creatoria/taro-ui'

export default function Demo() {
  return (
    <Button variant="primary" onClick={() => Toast.show('Hello!')}>
      点击我
    </Button>
  )
}

组件列表

基础组件

• Button 按钮
• Icon 图标
• Loading 加载

表单组件

• Input 输入框
• Textarea 文本域
• Checkbox 复选框
• Radio 单选框
• Switch 开关
• Slider 滑块
• Stepper 步进器
• Rate 评分
• Picker 选择器
• DatePicker 日期选择器
• TimePicker 时间选择器
• Cascader 级联选择
• Select 下拉选择
• Selector 选择组
• SearchBar 搜索栏
• Calendar 日历
• Form 表单
• Upload 上传

数据展示

• List 列表
• Card 卡片
• Avatar 头像
• Badge 徽标
• Tag 标签
• Divider 分割线
• Empty 空状态
• Collapse 折叠面板
• Accordion 手风琴
• Tabs 标签页
• Grid 宫格
• Table 表格
• Swiper 轮播
• IndexList 索引列表
• Progress 进度条
• Skeleton 骨架屏
• ImagePreview 图片预览
• SwipeAction 滑动操作

反馈组件

• Toast 轻提示
• Modal 对话框
• ActionSheet 动作面板
• BottomSheet 底部弹窗
• Popover 气泡弹出框
• Tooltip 文字提示
• Result 结果页
• NoticeBar 通知栏

导航组件

• NavBar 导航栏
• TabBar 标签栏
• Steps 步骤条
• SideBar 侧边栏
• Dropdown 下拉菜单
• Breadcrumb 面包屑
• Pagination 分页

其他

• SafeArea 安全区域
• ConfigProvider 全局配置
• PullRefresh 下拉刷新
• InfiniteScroll 无限滚动

主题定制

通过 CSS 变量自定义主题色：

:root {
  --ct-color-primary: #6366f1;
  --ct-color-success: #22c55e;
  --ct-color-warning: #f59e0b;
  --ct-color-error: #ef4444;
}

按需引入

支持按组件单独引入：

import { Button } from '@creatoria/taro-ui/lib/button'
import '@creatoria/taro-ui/lib/button/lib/button/index.css'

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev:weapp

# 构建库
pnpm build:lib

# 运行测试
pnpm test

License

MIT