[TDesign](https://github.com/Tencent/tdesign) 适配 [uniapp](https://uniapp.dcloud.net.cn/) 的组件库。
## 文档
[点此查看](https://tdesign.tencent.com/uniapp/)
## 预览
扫码查看 ↓
> 其他平台同样支持，仅因平台审核等原因未能上架预览，不影响组件库正常使用。
## 安装
### NPM 方式
```bash
npm i @tdesign/uniapp
```
### UNI_MODULES 方式
已上传 [插件](https://ext.dcloud.net.cn/plugin?name=tdesign-uniapp) 到 DCloud 插件市场，请打开插件详情页并点击`使用 HBuilderX 导入插件`。
## 使用
1. 在 `main.ts` 中引入样式文件
```js
import '@tdesign/uniapp/common/style/theme/index.css';
```
也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
```js
import '@tdesign/uniapp/common/style/theme/index.less';
```
2. 在文件中使用
```html
```
只提供按需导入方式，不支持全量导入（全量导入在小程序下有兼容性问题）。
## 自动导入
在 `pages.json` 配置 [easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)，可实现自动导入。
### CLI 模式
使用 CLI 模式，即使用 `node_modules` 下的 `@tdesign/uniapp` 时，配置如下。
```json
{
"easycom": {
"custom": {
"^t-(.*)": "@tdesign/uniapp/$1/$1.vue"
}
}
}
```
### UNI_MODULES 模式
使用 `uni_modules` 下的 `tdesign-uniapp` 时，配置如下。
```json
{
"easycom": {
"custom": {
"^t-(.*)": "@/uni_modules/tdesign-uniapp/components/$1/$1.vue"
}
}
}
```
## 编辑器提示
安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/@tdesign/uniapp/global.d.ts`，即可实现该效果。
## 平台兼容性
| 平台 | Vue2 | Vue3 | H5 | Android | iOS | App-nvue | 微信小程序 | QQ小程序 |
| ------------ | ---- | ---- | --- | ------- | --- | -------- | ---------- | -------- |
| **支持情况** | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ | ✅ | ✅ |
| 平台 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 小红书小程序 | 京东小程序 |
| ------------ | ------------ | ---------- | ---------- | ---------- | ------------ | ---------- |
| **支持情况** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
## 浏览器兼容性
| [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
iOS Safari| [
](http://godban.github.io/browsers-support-badges/)
Samsung | [
](http://godban.github.io/browsers-support-badges/)
Opera |[
]()
Android Browser|
| --------- | --------- | --------- | --------- | --------- |--------- |
| Firefox >=104| Chrome >=105| iOS Safari >=12.2| Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
## 反馈
有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-miniprogram/issues) 反馈或扫码加入用户微信群。
## 开源协议
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram/blob/develop/LICENSE)。