tencent/tdesign-react
tencent/tdesign-react
1
0
Fork 0
mirror of https://github.com/Tencent/tdesign-react.git synced 2024-10-23 08:33:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 优化文档内容 (#21)

Browse Source 
* feat: 优化文档内容

* feat: 优化文档内容

* fix: 文档内容

* feat: 修复 lint
This commit is contained in:
HQ-Lin 2021-12-07 21:24:26 +08:00 committed by GitHub
parent dd436b251a
commit e04307e403
10 changed files with 395 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintignore
View File

@ -1,8 +1,11 @@
snapshot*
dist
lib
es
node_modules
dist/
esm/
lib/
cjs/
lib/
es/
node_modules/
static
cypress
script/test/cypress

191
CONTRIBUTING.md
View File

@ -1,179 +1,38 @@
# tdesign-react 开发指南
# 参与贡献
tdesign-react 包含 Web-React 代码库和一个子仓库，子仓库地址为 [tdesign-common](https://github.com/TDesignOteam/tdesign-common)
非常感谢你对 TDesign 的关注，如果你想为组件库或其他产品贡献一份力量，请先了解下以下内容。
## 公共子仓库 TDesign-Common 说明
## 开启 issue
本项目以子仓库的形式引入 TDesign-Common 公共仓库，对应文件目录中的 common 文件夹。公共库中包含：
如果你想要贡献一个新特性，请在实际写代码前先开一个 issue 与社区里的小伙伴一起讨论必要性及实现方案。
- 一些公共的工具函数
- 组件库 UI 开发的内容，即组件 HTML 结构和 CSS 样式（React / Vue / Angular 共用同一份结构和样式）
## Github flow 贡献流程
### 初始化子仓库
- 首次克隆项目代码后需要初始化子仓库，执行命令 `git submodule init && git submodule update` 即可
- `git submodule update` 之后子仓不会指向任何开发分支，只是指向某一个提交的游离状态，因此需要手动切换到开发分支，执行命令 `cd src/_common && git checkout develop` 即可
### 子仓库开发
子仓库的组件分支从 `develop` 分支 `checkout`。比如在 `feature/button` 分支进行开发，在子仓库中开发完成之后提交代码时需要先完成子仓库代码提交，然后再回到 `tdesign-react` 主仓库完成提交。步骤如下：
- 先进入项目的 `src/_common` 文件夹，按照正常操作将结构和样式的修改提交到子仓库（涉及组件调整的建议同步到其他框架/库版本的开发者）
- 然后回到主仓库目录（`tdesign-react`），此时会看到 `src/_common` 文件夹是修改状态的，在主仓库按照正常步骤添加变动进行提交即可
- 样式部分统一使用 `less` 开发。
### 组件 API
组件 API 相关文件包括 `props.ts` / `type.ts` / `api.md` 等 3 类文件，可展开 src/button 目录查看。
所有组件 API 相关文件，并非手动书写，而是通过工具 tdesign-cli 自动生成，一般情况下不允许变更。如需变更，请联系 PMC。
### 关于组件库 UI
目前 UI 开发（HTML & CSS）是多个框架/库公用的，比如 Web-React / Web-Vue / Web-Angular。各个框架组件实现应该要复用 UI 开发的 HTML 结构，引用组件的 CSS 样式和 Demo 文档的样式（本仓库已经在入口处统一引用了）。UI 开发一般可以由单独的 UI 开发同学认领完成或者某个框架/库的组件开发同学完成，只需注意：
- 如果组件开发前子仓库中已经有组件的 UI 开发内容了，直接在主仓库中使用即可
- 如果没有，且你也负责 UI 开发：参考 UI 开发规范先完成 UI 开发内容、然后再到主仓库开发组件
- 如果没有，且 UI 开发工作已有其他同学负责或认领：可以先在主仓库开发组件功能，待 UI 开发输出之后对齐即可
如果 UI 的结构和样式（其他同学负责开发的情况下）还未完成，但是开发组件功能需要编写一些样式代码，可以直接在组件文件夹编写一个临时的 `less` 文件，在 JavaScript 代码中引入即可，比如：
```shell
├── button.less
├── button.tsx
```
```jsx
// button.tsx
// 先引入临时的样式文件用于开发功能，待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
import './button.less';
// ...
```
## 开发规范
UI 开发规范参考子仓库的 [README](https://github.com/TDesignOteam/tdesign-common/tree/main/style/web) 文档
### 前缀
组件和 CSS 选择器前缀以 `t-` 开头，无论是 JavaScript 还是 CSS 代码都要使用变量定义前缀，这样可以方便后续进行全局替换。
### TypeScript 代码规范
组件库统一使用 TypeScript 编写，并且遵循 Airbnb 的代码规范：
- JavaScript 编码规范：https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
- TypeScript 部分遵循工程的 Lint 配置
开发提交时可以使用 `tnpm run lint --fix` 执行自动修复 `eslint` 错误
### CSS 规范
组件样式在 common 子仓库开发，遵循子仓库中定义的 [UI 开发规范](https://github.com/TDesignOteam/tdesign-common/blob/main/style/web/README.md)即可
### Git 分支规范
#### 分支
主仓库遵循使用 `git flow` 规范，新组件分支从 `develop` 分支中 `checkout`（参考：https://nvie.com/posts/a-successful-git-branching-model/）
如果是贡献组件，从 `develop` 分支 `checkout` 分支即可，比如：`feature/button`。如果同时需要在子仓库进行 UI 开发/修改，这里建议在子仓库中也要 `checkout` 同名分支
#### 提交说明
项目使用基于 angluar 提交规范：https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional
每次提交会自动触发提交验证
- 使用工具 commitizen 协助规范 git commit 信息
- fix & feat 的提交会被用来生成 changelog
- 提交会触发 git pre-commit 检查，修复提示的 eslint 错误
- 请将本项目 clone 至本地
- 创建 feature/fix 分支
- 开发过程中可以使用 `git fetch` 或 `git rebase` 来同步上游分支代码
- 提交代码到 forked 仓库，commit message 撰写请参照 [Angular Commits 规范](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#commits)
- 发起 pr
- 会有 PMC 同学来 CR 本次提交的代码，请及时关注 CR 评论通知信息
- CR 通过后会合并进入 develop 分支，等待周迭代或紧急 patch 版本发布 npm
## 开发
### 安装依赖
```bash
git clone https://github.com/TDesignOteam/tdesign-react.git
cd tdesign-react
git submodule init
git submodule update
```shell
# 开发预览
cd ..
npm i
# 或者
npm install
npm run dev
# 打开浏览器访问 http://127.0.0.1:16000
```
### 本地开发
更多指引请参考：
```shell
npm run start
```
浏览器访问：`http://127.0.0.1:15000`（构建任务配置了自动打开浏览器访问站点页面）
单独调试 Demo 页面
浏览器访问：`http://127.0.0.1:15000/react/demos/[componentName]/` 选择调试 Demo
### 目录结构
```shell
├── site # 站点代码
├── src # 组件代码
├── src/[组件]/__tests__ # 测试文件
├── src/[组件]/_example # 演示文件
├── test # 测试配置
```
### 新增开发组件
可以参考已有组件在 `src` 目录中新增组件文件夹。 或通过以下脚本创建
```shell
## 第一步 在react仓库内执行创建脚本
npm run init component-name
## 第二步 同步最新的组件API文档(联系 PMC)
## 第三步 在site/site.config.js中新增一个新组件的config
```
### 组件页面路由配置
每一个组件页，都是一个 md 文件，在 `site/site.config` 路由中配置即可。
### 组件 Demo 演示配置
为了保证与 vue 仓库演示文档内容统一，目前将公共基础演示 demo 与说明归档在 `src/_common/docs/web/api/[组件].md` 中，其中需要各个技术栈的组件提供文档里面所要求的基础 demo 文件否则会编译警告。
例如 `tooltip` 组件则需要 `_expample` 文件夹中包含有 `arrow.jsx`、 `noArrow.jsx` 文件
```md
# Tooltip 文字提示
用于文字提示的气泡框。
## 组件类型
### 带箭头的文字提示
{{ arrow }}
### 不带箭头的文字提示
{{ noArrow }}
```
如需额外添加演示 demo 的可以参考以下写法:
```md
{{ PrimaryButton }}
<!-- or -->
::: demo _example/PrimaryButton.jsx button
:::
```
### 组件测试参考
- [Jest](https://jestjs.io/)
- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
- [开发指南](./DEVELOP_GUIDE.md)
<!-- - [测试指南](./TEST_GUIDE.md) -->

214
DEVELOP_GUIDE.md Normal file
View File

@ -0,0 +1,214 @@
# 开发指南
tdesign-react 包含 web-react 代码和一个子仓库，子仓库指向 [tdesign-common](https://github.com/TDesignOteam/tdesign-common) 仓库
## 公共子仓库 tdesign-common
本项目以子仓库的形式引入 tdesign-common 公共仓库，对应 src/\_common 文件夹
公共仓库中包含
- 一些公共的工具函数
- 组件库 UI 开发内容，既 html 结构和 css 样式（React/Vue 等多技术栈共用）
### 初始化子仓库
- 初次克隆代码后需要初始化子仓库： git submodule init && git submodule update
- git submodule update 之后子仓库不指向任何分支，只是一个指向某一个提交的游离状态
### 子仓库开发
子仓库组件分支从 develop checkout 示例：feature/button，提交代码时先进入子仓库完成提交，然在回到主仓库完成提交
- 先进入 common 文件夹，正常将样式修改添加提交
- 回到主仓库，此时应该会看到 common 文件夹是修改状态，按照正常步骤添加提交即可
### 关于组件库 UI
UI 开发（html & css）是由 React/Vue 等多个实现框架共用的。各个框架组件实现应该要复用 UI 开发的 html 结构，引用其组件 css 与 demo css（本仓库已在入口处引用了），UI 开发一般可由单独的 UI 开发同学认领完成或各框架组件开发同学的其中一名同学完成
- 如果开发前已有某个组件的 UI 开发内容，直接在主仓库使用即可
- 如果没有，且你也负责 UI 开发：参考 UI 开发规范完成 UI 开发内容、然后再开发主仓库组件
- 如果没有，且 UI 开发工作已有其他同学负责或认领：可以先在主仓库开发组件功能，待 UI 开发输出之后对齐即可
如果 UI 内容和样式（其他同学负责开发）还未完成，而你开发组件功能时需要写一些样式，可以直接在组件文件夹先写一个临时的 less 文件，在 js 中引入即可，如：
```
├── button.less
├── button.tsx
```
```js
// button.tsx
// 先引入临时的样式文件用于开发功能，待 UI 开发完成之后需要与 UI 样式对齐并删除 less 文件
import './button.less';
```
## 开发规范
UI 开发规范参考子仓库 README [子仓库 README](https://github.com/TDesignOteam/tdesign-common/tree/develop/style/web)
### API 规范
[API](./src/_common/api.md)
### 前缀
组件和 css 前缀以 t- 开头，无论 js 还是 css 都使用变量定义前缀，方便后续替换
### js
遵循 eslint-config-airbnb-base 编码规范
使用 `npm run lint:fix` 执行自动修复 eslint 错误
### css
组件样式在 common 子仓库开发，类名使用 [BEM 命名规则](http://getbem.com/)
### git
#### 分支
主仓库遵循使用 git flow 规范，新组件分支从 develop checkout：[https://nvie.com/posts/a-successful-git-branching-model/](https://nvie.com/posts/a-successful-git-branching-model/)
如果是贡献组件，则从 develop checkout 分支如：feature/button，记得如果同时要在子仓库开发 UI，子仓库也要 checkout 同名分支
#### 提交说明
项目使用基于 angular 提交规范：[https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
每次提交会自动触发提交验证
- 使用工具 commitizen 协助规范 git commit 信息
- fix & feat 的提交会被用来生成 changelog
- 提交会触发 git pre-commit 检查，修复提示的 eslint 错误
具体细节可参考`package.json husky 配置`
##### 提交步骤
1. 选择并确认好需要提交的代码
2. 考虑到可视化工具的差异，建议使用命令行提交，输入 `git commit`，然后根据提示逐步输入必要的信息即可
**windows 用户注意事项：** 由于 husky 中配置的 git hook 指令依赖 shell 执行环境，为了保证正常的提交，建议在 git bash 或 [windows 10 wsl 环境](https://docs.microsoft.com/en-us/windows/wsl/install-win10) 下执行提交。
## 开发
### 安装依赖
```bash
npm i
```
### 本地开发
```shell
npm run start
```
浏览器访问 <http://127.0.0.1:15000>
### 目录结构
```shell
├── site # 站点代码
├── src # 组件代码
├── src/[组件]/__tests__ # 测试文件
├── src/[组件]/_example # 演示文件
├── test # 测试配置
```
### 新增开发组件
npm run init component-name
```bash
npm run init button
```
其中，button 为组件名称。删除组件使用 `npm run init button del` 。
### 组件页路由配置
每一个组件页，都是一个 md 文件，参考 `/site/site.config.js` 已有定义，直接按照模板添加即可
```javascript
{
title: '基础组件',
type: 'component', // 组件文档
children: [
{
title: 'Button 按钮',
name: 'button',
path: '/react/components/button',
component: () => import('tdesign-react/button/README.md'),
},
{
title: 'Divider 分割线',
name: 'divider',
path: '/react/components/divider',
component: () => import('tdesign-react/divider/README.md'),
},
...
],
},
```
### 组件 Demo 演示配置
为了保证与 vue 等其他仓库演示文档内容统一，目前将公共基础演示 demo 与说明归档在 `src/_common/docs/web/api/[组件].md` 中，其中需要各个技术栈的组件提供文档里面所要求的基础 demo 文件否则会编译警告。
例如 `tooltip` 组件则需要 `_expample` 文件夹中包含有 `arrow.jsx`、 `noArrow.jsx` 文件
```md
# Tooltip 文字提示
用于文字提示的气泡框。
### 带箭头的文字提示
{{ arrow }}
...
```
如需额外添加演示 demo 的可以参考以下写法:
```md
{{ PrimaryButton }}
```
### Demo 调试
当一个 md 文件插入了很多个 demo 之后，一些组件生命周期方法调试起来会变得困难，若想对某个 demo 单独调试，可以访问路由：/demos/组件名/demo 名，如想单独调试 button 组件 demos 文件夹下的 base demo，则可点击 demo 旁的箭头或直接访问：<http://127.0.0.1:15000/#/react/demos/button/base>
所有 demo 路由列表页：<http://127.0.0.1:15000/#/react/demos>
### 组件测试参考
- [Jest](https://jestjs.io/)
- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
### 项目常用脚本说明
```bash
# 启动项目
npm run start
# 更新网站组件单元覆盖率徽章
npm run update:coverage-badge
# 编译站点
npm run site
# 编译站点预览
npm run site:staging
# 编译组件库
npm run build
# 快速创建组件及其相关文件
npm run init
# 运行行单元测试用例
npm run test
# 自动修复 eslint 错误
npm run lint:fix
# 查看 eslint 错误
npm run lint
```

20
LICENSE
View File

@ -1,21 +1,9 @@
MIT License
Copyright (c) 2020-present Tencent
Copyright (c) 2021-present TDesign, tdesign@tencent.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

71
README.md
View File

@ -1,32 +1,61 @@
# TDesign Web (React) <a href="https://www.npmjs.com/package/tdesign-react"><img src="https://img.shields.io/npm/v/tdesign-react.svg?sanitize=true" alt="Version"></a> <a href="https://www.npmjs.com/package/tdesign-react"><img src="https://img.shields.io/npm/dt/tdesign-react.svg?sanitize=true" alt="Downloads"></a> <a href="https://www.npmjs.com/package/tdesign-react"><img src="https://img.shields.io/npm/l/tdesign-react.svg?sanitize=true" alt="License"></a>
<p align="center">
<a href="https://tdesign.tencent.com/" target="_blank">
<img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/site/TDesign.png" />
</a>
</p>
TDesign 是由前端通用 UI 组件库 Oteam 发起，协同公司内有组件库开发经验的同学一起建设的组件库
<p align="center">
<a href="https://www.npmjs.com/package/tdesign-react">
<img src="https://img.shields.io/npm/v/tdesign-react.svg?sanitize=true" alt="Version">
</a>
<a href="https://www.npmjs.com/package/tdesign-react">
<img src="https://img.shields.io/npm/dt/tdesign-react.svg?sanitize=true" alt="Downloads" />
</a>
<a href="https://www.npmjs.com/package/tdesign-react">
<img src="https://img.shields.io/npm/l/tdesign-react.svg?sanitize=true" alt="License" />
</a>
</p>
## 特性
TDesign 适配桌面端的组件库，适合在 React 16.x 技术栈项目中使用。
- 前端通用 UI 组件库 Oteam Web React 版实现
# 🎉 特性
- 适配桌面端交互
- 基于 React 16.x（全部基于 React Hooks 的 Functional Component）
- 对接前端组件语言规范
- 与其他框架/库（Vue / Angular）版本 UI 保持一致
- 支持国际化（完善中）
- 支持暗黑模式及其他主题定制
- 支持按需加载
## 参与贡献
### 组件开发
# 安装
```shell
git clone https://github.com/TDesignOteam/tdesign-react.git
cd tdesign-react
# 初始化子仓库
git submodule init
git submodule update
# 子仓库切换到 develop 分支
cd src/_common && git checkout develop
# 开发预览
cd ../..
npm install
npm run start
npm i tdesign-react
```
更多开发指引请参考[开发规范与说明](./CONTRIBUTING.md)
# 基础使用
推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：
```js
import { Button } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'; // 少量公共样式
```
npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/TDesignOteam/tdesign-common/blob/develop/develop-install.md) 了解不同目录下产物的差别。
# 其他技术栈实现
- 桌面端 Vue 3 实现：[web-vue-next](https://github.com/Tencent/tdesign-vue-next)
- 桌面端 Vue 实现： [web-react](https://github.com/Tencent/tdesign-vue)
- 移动端小程序实现： [小程序](https://github.com/Tencent/tdesign-miniprogram)
# 浏览器兼容性
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | last 3 versions | last 3 versions | last 2 versions |
# 开源协议
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-react/LICENSE)。

5
package.json
View File

@ -34,7 +34,8 @@
"site": "cd site && vite build",
"site:serve": "cd site && vite preview",
"site:staging": "cd site && vite build --mode staging",
"lint": "eslint ./src --max-warnings 0 --ext .ts,.tsx --fix",
"lint": "eslint --ext .ts,.tsx ./ --max-warnings 0",
"lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
@ -64,7 +65,7 @@
"lint-staged": {
"src/**/*.{ts,tsx}": [
"prettier --write",
"npm run lint",
"npm run lint:fix",
"git add"
]
},

87
site/docs/getting-started.md Normal file
View File

@ -0,0 +1,87 @@
# React for Web
TDesign 适配桌面端的组件库，适合在 React 技术栈项目中使用。
## 安装
```shell
npm i tdesign-react
```
## 基础使用
推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：
```javascript
import { Button } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'; // 少量公共样式
```
### 也提供不带样式引入
```javascript
import { Button } from 'tdesign-react/lib/';
import 'tdesign-react/dist/tdesign.css'; // 如需样式请添加这行
```
### 更改主题
由于原始样式基于 less 编写，需要自行处理 less 文件的编译（例如安装 less、less-loader）
更多 less 变量定义 [查看这里](https://github.com/TDesignOteam/tdesign-common/blob/main/style/web/_variables.less)
```javascript
import { Button } from 'tdesign-react/esm/';
import 'tdesign-react/esm/style/index.js'; // 少量公共样式
```
在 vite 中定制主题
```javascript
// vite.config.js
export default {
css: {
preprocessorOptions: {
less: {
modifyVars: {
'@btn-height-default': '40px',
},
},
},
},
};
```
在 webpack 中定制主题
```javascript
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
+ options: {
+ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
+ modifyVars: {
+ '@btn-height-default': '40px',
+ },
+ javascriptEnabled: true,
+ },
+ },
}],
}],
}
```
npm package 中提供了多种构建产物，可以阅读 [这里](https://github.com/TDesignOteam/tdesign-common/blob/develop/develop-install.md) 了解不同目录下产物的差别。
## 浏览器兼容性
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE11, Edge | last 3 versions | last 3 versions | last 2 versions |

6
site/site.config.js
View File

@ -6,11 +6,11 @@ export default {
type: 'doc', // 组件文档
children: [
{
title: '说明',
title: '快速开始',
name: 'expain',
docType: 'explain', // 控制头图展示
path: '/react/components/expain',
component: () => import('@docs/expain.md'),
path: '/react/components/getting-started',
component: () => import('@docs/getting-started.md'),
},
{
title: '更新日志',

1
test/utils/index.ts
View File

@ -1,3 +1,4 @@
import '@testing-library/jest-dom';
export * from '@testing-library/react';
export * from './test-examples';

1
test/utils/test-examples.ts
View File

@ -1,3 +1,4 @@
/* eslint-disable */
import * as fs from 'fs';
import * as path from 'path';
import React, { FunctionComponent, ComponentClass } from 'react';