tdesignoteam/tdesign-web-components

English | 简体中文

TDesign Web Components is a UI component and is suitable for use in any front-end project.

🎉 Features

• Desktop application interaction
• High quality UI components based on omi
• Consistent API and UI with TDesign component libraries for other frameworks
• Dark mode and customizable theme
• Support tree-shaking

📦 Installation

npm i tdesign-web-components

yarn add tdesign-web-components

pnpm add tdesign-web-components

🔨 Usage

import 'tdesign-web-components/lib/button'
import 'tdesign-web-components/lib/style/index.css'

document.querySelector('#app').innerHTML = `<t-button>Hello TDesign</t-button>`

The package of tdesign-web-components provides kinds of bundles, read the documentation for the detail of differences between bundles.

Quick Start

Visit TDesign Starter to experience in the application built with TDesign React UI components.

Browser Support

IE / Edge	Firefox	Chrome	Safari
Edge >=84	Firefox >=83	Chrome >=84	Safari >=14.1

Read our browser compatibility for more details.

TDesign component libraries

TDesign also provides component libraries for other platforms and frameworks.

• component library for Vue 3.x : tdesign-vue-next
• component library for Vue 2.x : tdesign-vue
• component library for Wechat miniprogram : tdesign-miniprogram

Contributing

Contributing is welcome. Read guidelines for contributing before submitting your Pull Request.

Contributors

Feedback

Create your Github issues or scan the QR code below to join our user groups

License

The MIT License. Please see the license file for more information.

tdesign-web-components's Issues

Upload

基于OMI框架完成t-upload组件开发，要求完成以下功能即可：
本期暂不支持drag上传和多文件上传

t-upload：

1、【props】：theme, files, sizeLimit, accept, tips, disabled, autoUpload, placeholder, action, abridgeName, formatResponse;
2、【events]: onChange, onFail, onSuccess, onSelectChange, onPreview, onValidate, beforeUpload;
3、【methods】：uploadFiles;

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

【input】支持无边框模式

支持网站build，整体样式对齐tdesign

Breadcrumb

基于OMI框架完成t-breadcrumb组件及其子组件t-breadcrumb-item开发，要求完成以下功能即可：

t-breadcrumb：

1、【props】：className, maxItemWidth, options, separator

t-breadcrumb-item：

1、【props】：className, disabled, href, target, maxWidth
2、【events]: onClick

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

【Textarea】现有问题集中修复

1、无法输入中文拼音
2、禁用状态的样式问题
3、触发onKeyup，onKeydown等事件报错

构建发布流程标准化

Menu

基于OMI框架完成t-menu组件及其子组件t-menu-item开发，要求完成以下功能即可：

t-menu：

1、【props】：className, collapsed, expandMutex, value, width
2、【slots】：logo, operations
3、【events】：onChange, onExpand

t-menu-item：

1、【props】：value, label, disabled, target, href
2、【events】：onClick

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

整体项目搭建，支持组件编写和实时预览

[Button & Popup] 按钮点击回调会触发两次，popup按钮点击会弹两遍

tdesign 版本

0.0.1

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

WIP: TDesign Web Components V1.0 Roadmap

Components V1.0

基础构建及官网完善

Beta Give feedback

1. 展示API列表样式优化
2. 增加示例右边栏导航
3. 示例支持代码展示 #8
   +0
   
4. 支持Codesandbox或Stackblitz打开 #9
   +0
   
5. 增加单测支持 #22
   +0
6. 构建发布流程标准化 #23
   +0
7. 网站&组件&目录整理 #1
   +0
8. feat: 优化路由跳转 #2
   +0
9. chore(lint): 增加代码自动格式化 & 优化目录 & commit msg 格式化 & common子仓库 #4
   +0

待迁移组件

Beta Give feedback

1. Alert #77
   +0
2. Avatar
3. BackTop #69
   +0
4. Badge #122
   +0
5. Button
6. Card #86
   +0
7. Comment
8. Divider
9. Drawer #121
   +0
10. Dropdown #65
    +0
    
11. Grid #88
    +0
    
12. Image
13. InputAdornment
14. InputNumber #138
    +0
15. Input
16. Link #120
    +0
17. List
18. Loading #63
    +0
    
19. Message
20. Notification
21. Popup #62
    +0
22. Progress
23. Radio
24. Rate
25. Skeleton
26. Slider
27. Space
28. Switch #45
    +0
    
29. TagInput #117
    +0
30. Tag
31. Textarea
32. Timeline
33. Tooltip

待开发组件

Beta Give feedback

1. Checkbox #10
   enhancement +1
   
2. Select #11
   +0
3. Dialog #12
   +0
4. Menu #13
   +0
5. Breadcrumb #14
   +0
6. ColorPicker #15
   +0
7. BackTop #24
   +0
8. Upload #16
   +0
9. Swiper #17
   +0
10. Collapse #18
    +0
11. DatePicker
12. Watermark #33
    +0
13. Affix #32
    +0
14. Slider #29
    +0
15. RangeInput #28
    +0
16. Radio #27
    +0
17. Tabs #19
    +0
18. Popconfirm #20
    +0

v1.0待发版前问题走查集中修复

Beta Give feedback

1. input
2. taginput
3. dropdown
4. tabs

Card

Collapse

基于OMI框架完成t-collapse组件开发，要求完成以下功能即可：

t-collapse：

1、【props】：className, borderless, defaultExpandAll, disabled, expandIconPlacement, expandMutex, expandOnRowClick, value
2、【events]: onChange

t-collapse-panel：

1、【props】：className, destroyOnCollapse, disabled, value
2、【slots]: header, expandIcon, headerRightContent

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Popconfirm

基于OMI框架完成t-popconfirm组件开发，要求完成以下功能即可：

t-popconfirm：

1、【props】：className, cancelBtn, confirmBtn, destroyOnClose, placement, showArrow, visible, content
2、【events]: onCancel, onConfirm, onVisibleChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Icons

组件名称中英文

交互稿

交互稿：

设计稿

设计稿：

已实现的技术栈：

• tdesign-vue
• tdesign-vue-next
• tdesign-react

参与贡献

如果你想要认领组件开发，请在本 issue 中评论认领并预估提交 PR 时间，例：

“我认领这个组件 tdesign-vue 仓库的实现任务，预计 x 日后提交”

请尽量在预期时间内完成，超期后 PMC 同学可能会联系其他同学接手实现。

详细提交过程请参考：如何贡献。

欢迎填写《贡献者加入意向收集》问卷加入 TDesign 贡献者群，参与过程中遇到的各类问题可以得到实时解答和指引。

Dialog

基于OMI框架完成t-dialog组件开发，要求完成以下功能即可：

t-dialog：

1、【props】：className, visible, showOverlay, closeOnOverlayClick, cancelBtn, closeBtn, confirmBtn
2、【slots】：body, footer, header
3、【events】：onConfirm, onClose, onCancel, onOpened
4、【methods】: show, hide, destroy

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

BackTop

基于OMI框架完成t-backtop组件开发，要求完成以下功能即可：

t-backtop：

1、【props】：container, content, duration, offset, shape, size, target, theme, visibleHeight
2、【events]: onClick

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Grid

BackTop

Button

example支持omi class组件格式

这个功能解决了什么问题

目前组件的example只支持纯函数jsx格式，无法使用web components的生命周期，有些demo需要使用生命周期方法用来更新view

你建议的方案是什么

example支持omi的class组件格式，文件以-omi结尾，例如base-omi.tsx

Tooltip

组件名称中英文

交互稿

交互稿：

设计稿

设计稿：

已实现的技术栈：

• tdesign-vue
• tdesign-vue-next
• tdesign-react

参与贡献

如果你想要认领组件开发，请在本 issue 中评论认领并预估提交 PR 时间，例：

“我认领这个组件 tdesign-vue 仓库的实现任务，预计 x 日后提交”

请尽量在预期时间内完成，超期后 PMC 同学可能会联系其他同学接手实现。

详细提交过程请参考：如何贡献。

欢迎填写《贡献者加入意向收集》问卷加入 TDesign 贡献者群，参与过程中遇到的各类问题可以得到实时解答和指引。

Checkbox

基于OMI框架完成t-checkbox和t-checkbox-group组件开发，要求完成以下功能即可：

t-checkbox：

1、【props】：className, checked, disabled, indeterminate, readonly, value, label
2、【event】：onChange

t-checkbox-group：

1、【props】：className, disabled, value, max, options
2、【event】：onChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

【Avatar】头像图片不垂直居中问题

Badge

Switch

Loading

ColorPicker

Drawer

【Input】支持清空及密码输入

1、支持内容可清空并补充demo

2、支持密码输入模式并补充demo

以上，功能和样式同tdesign-react input

Popup

RangeInput

基于OMI框架完成t-range-input组件开发，要求完成以下功能即可：

t-range-input：

1、【props】：className, activeIndex, clearable, disabled, format, placeholder, readonly, separator, size, status, value
2、【events]: onChange, onBlur, onFocus

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Radio

基于OMI框架完成t-radio组件开发，要求完成以下功能即可：

t-radio：

1、【props】：className, disabled, size, checked, value, label
2、【events]: onChange

t-radio-group：

1、【props】：className, variant, options, disabled
2、【events]: onChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

示例支持代码展示

Tabs

基于OMI框架完成t-tabs组件开发，要求完成以下功能即可：

t-tabs：

1、【props】：className, disabled, placement, size, theme, value
2、【events]: onChange

t-tab-panel:

1、【props】：label, value
2、【events】：onChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Slider

基于OMI框架完成t-slider组件开发，要求完成以下功能即可：

t-slider：

1、【props】：className, disabled, min, max, step, value, inputNumberProps, tooltipProps
2、【events]: onChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Build构建并支持esm、cjs、umd和按需加载，支持通过less变量和css变量修改主题

Select

基于OMI框架完成t-select组件及其子组件t-option开发，要求完成以下功能即可：

t-select：

1、【props】：className, size, options, value, disabled, size, placeholder, clearable, autoWidth, borderless
2、【events】：onChange, onClear

t-option：

1、【props】：value, label, disabled

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Watermark

基于OMI框架完成t-watermark组件开发，要求完成以下功能即可：

t-watermark：

1、【props】：className, alpha, content, height, width, isRepeat, lineSpace, watermarkContent, x, y

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Link

支持Codesandbox或Stackblitz打开

TagInput

Alert

Popup

组件名称中英文

交互稿

交互稿：

设计稿

设计稿：

已实现的技术栈：

• tdesign-vue
• tdesign-vue-next
• tdesign-react

参与贡献

如果你想要认领组件开发，请在本 issue 中评论认领并预估提交 PR 时间，例：

“我认领这个组件 tdesign-vue 仓库的实现任务，预计 x 日后提交”

请尽量在预期时间内完成，超期后 PMC 同学可能会联系其他同学接手实现。

详细提交过程请参考：如何贡献。

欢迎填写《贡献者加入意向收集》问卷加入 TDesign 贡献者群，参与过程中遇到的各类问题可以得到实时解答和指引。

Affix

基于OMI框架完成t-affix组件开发，要求完成以下功能即可：

t-affix：

1、【props】：className, container, content, offsetBottom, offsetTop, zIndex
2、【events]: onFixedChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

Dropdown

Swiper

基于OMI框架完成t-swiper组件开发，要求完成以下功能即可：

t-swiper：

1、【props】：animation, autoplay, current, direction, duration, interval, loop, stopOnHover, trigger, type, navigation
2、【events】：onChange

以上api功能细则、ui样式、对应demo示例均参考已有TDesign react/vue版

增加单测支持

isLightDOM模式时，omi会重复渲染DOM

tdesign 版本

latest

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

【TagInput】现有问题集中修复

1、无法清除
2、宽度自适应的标签未实现
3、使用 excessTagsDisplayType 控制标签超出时的呈现方式，目前标签数量超出无法换行问题

[Site Demo] html原生标签浏览器默认行为失效

tdesign 版本

0.0.0

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response