Tea 框架 - 组件库

文档 & 示例

组件用法可参考 http://tea.tencent.com/component

组件目录

组件升级还在进行中，进度如下（🏃 进行中 📌 已计划 🕒 暂时挂起）：

• 通用
  • [x] Button - 按钮
  • [x] Icon - 图标
• 布局
  • [x] Grid - 栅格
  • [x] Layout - 布局
  • [x] Justify - 端对齐
• 导航
  • [x] Breadcrumb - 面包屑
  • [x] Jumper - 跳转
  • [x] Link - 链接
  • [x] Menu - 左侧菜单
  • [x] NavMenu - 导航菜单
  • [x] Pagination - 分页
  • [x] Tabs - 选项卡
• 展示
  • [x] Alert - 警示
  • [x] Badge - 徽章
  • [x] Calendar - 日历
  • [x] Card - 卡片
  • [x] Collapse - 折叠面板
  • [x] Form - 表单
  • [x] List - 列表
  • [x] MediaObject - 媒体对象
  • [x] MetricsBoard - 统计面板
  • [x] Progress - 进度
  • [x] Status - 状态
  • [x] StatusTip - 加载状态提示
  • [x] Stepper - 步骤
  • [x] Table - 表格
  • [x] Tag - 标签
  • [x] Text - 文本
  • [x] Tree - 树形控件
• 输入
  • [x] AutoComplete - 自动补全
  • [x] Checkbox - 多选
  • [x] Cascader - 级联选择
  • [x] DatePicker - 日期选择
  • [x] Input - 文本输入
  • [x] InputAdornment - 输入装饰
  • [x] InputNumber - 数字输入
  • [x] Radio - 单选
  • [x] SearchBox - 搜索
  • [x] Segment - 分段选择
  • [x] Select - 下拉选择
  • [x] Slider - 滑块
  • [x] Switch - 开关
  • [x] TagSelect - 标签选择
  • [x] TimePicker - 时间选择
  • [x] Upload - 上传
• 交互
  • [x] Bubble - 气泡
  • [ ] CheckTree - 树状多选
  • [x] Drawer - 抽屉
  • [x] Dropdown - 下拉
  • [x] ImagePreview - 图片预览
  • [x] Guide - 引导
  • [x] Message - 提示
  • [x] Modal - 对话框
  • [x] Notification - 通知
  • [x] PopConfirm - 就地确认
  • [x] Popover - 就地弹出
  • [x] Tooltip - 文本解释
  • [x] Transfer - 穿梭框
  • [x] Video - 视频播放
• 工具
  • [x] Affix - 固钉
  • [x] Copy - 复制
  • [x] Overlay - 定位浮层
  • [x] Transition - 转场动画
• 业务相关
  • [x] Blank - 空白页
  • [x] MonacoEditor - 代码编辑器
  • [x] RegionSelect - 地域选择
  • [x] TagSearchBox - 标签搜索
• 其他
  • [x] ConfigProvider - 全局配置
• 工具方法
  • [x] ClassNames - 获取内置类名
  • [x] Config - 获取全局配置
  • [x] OutsideClick - 外部点击处理
• 不推荐使用
  • [x] CodeEditor - 代码输入[@deprecated]
  • [x] ContentView - 内容视图[@deprecated]

开发

本地开发

前往 tea-web 目录，执行 npm install 完成依赖安装，然后执行 npm run start，即可在本地运行起 Tea 文档站点。

新建组件

如需新建组件，请先在上文 组件目录 中添加组件说明，并建立相对应的目录。

README.md

网站中组件示例由 tea-component/src/ 下各组件目录中 README.md 生成，一个 README.md 的示例如下：

# Button 按钮

提供标准的按钮交互和样式。

## 使用示例

<!-- <Half> -->

### 主要按钮

主按钮是用户在整个页面需要关注的优先级最高的操作，或者是我们需要最想要引导用户关注的操作。

[Example: 主要按钮](./_example/PrimaryButton.jsx)

<!-- </Half> -->

## 组件属性

[Interface: ButtonProps](./Button.tsx)

git 相关

分支

请基于 release 分支来进行开发，开发完成后请提交 Merge Request 到该分支。

提交注释

请参考提交注释规范

发布

构建

执行 npm run build 进行构建。

版本号更新

执行 npm version patch 更新末位版本号。

如需发布非 @latest 版本，请修改对应标签版本号，如 2.0.0-beta.1。

发布至 TNPM

执行 tnpm publish 发布包。

如需发布非 @latest 版本，请添加 --tag 参数，如 tnpm publish --tag beta。