Tea 框架 - 组件库

文档 & 示例

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

组件目录

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

- 通用
- [x] Button - 按钮
- [x] Icon - 图标
- [x] Avatar - 头像
- 布局
- [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] Timeline - 时间轴
- [x] Tree - 树形控件
- 输入
- [x] AutoComplete - 自动补全
- [x] Checkbox - 多选
- [x] Cascader - 级联选择
- [x] DatePicker - 日期选择
- [x] Input - 文本输入
- [x] InputAdornment - 输入装饰
- [x] InputNumber - 数字输入
- [x] Radio - 单选
- [x] Rate - 评分
- [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]

开发

$3

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

#### 新建组件

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

#### README.md

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

``md


Button 按钮

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

使用示例

$3

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

Example: 主要按钮

组件属性

Interface: ButtonProps
`

$3

#### 分支

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

#### 提交注释

请参考提交注释规范

发布

$3

执行 npm run build 进行构建。

$3

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

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

$3

执行 tnpm publish 发布包。

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