tntd
v3.0.36-beta.1
Published
tntd是基于 TNT Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
Downloads
3,787
Readme
组件介绍
tntd是基于 TNT Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。
如何从 tntd v1.0
迁移到 tntd v2.0
安装 tntd
最新版本
npm install tntd
更改配置
- 添加 .babelrc 中的 import 插件配置,实现按需引入
+ [
+ "import",
+ {
+ "libraryName": "tntd",
+ libraryDirectory: 'es',
+ },
+ "tntd"
+ ],
- 更改 webpack.config.js 中的主题配置
{
loader: "less-loader",
options: {
javascriptEnabled: true,
...
modifyVars: {
- hack: "true; @import \"~@tntd/antd-cover/tnt.less\";"
+ hack: "true; @import \"~tntd/themes/default/variables.less\";"
}
}
}
- 修改导入名称
Layout, Icon, Select 等 tntd 1.0 组件和 antd 组件名称存在冲突,请按下方例子进行重命名:
- import { Layout, Icon, Select } from 'tntd'
+ import { TntdLayout, TntdIcon, TntdSelect } from 'tntd'
- 更改配置
// 使用全新的空状态插画
import { renderEmpty } from 'tntd'
// 使用内置语言包替换 antd
// 英文语言包
const enUS = import 'tntd/es/locale/en_US'
// 中文语言包
const zhCN = import 'tntd/es/locale/zh_CN'
export const App = () => {
return (
// 使用空状态插画及语言包
<ConfigProvider locale={zhCN} renderEmpty={renderEmpty}>
...
</ConfigProvider>
)
}