tntd
TypeScript icon, indicating that this package has built-in type declarations

3.0.0-beta.8 • Public • Published

组件介绍

tntd是基于 TNT Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。

如何从 tntd v1.0 迁移到 tntd v2.0

安装 tntd 最新版本

npm install tntd

更改配置

  1. 添加 .babelrc 中的 import 插件配置,实现按需引入
+  [
+    "import",
+    {
+      "libraryName": "tntd",
+      libraryDirectory: 'es',
+    },
+    "tntd"
+  ],
  1. 更改 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\";"
    }
  }
}
  1. 修改导入名称

Layout, Icon, Select 等 tntd 1.0 组件和 antd 组件名称存在冲突,请按下方例子进行重命名:

- import { Layout, Icon, Select } from 'tntd'
+ import { TntdLayout, TntdIcon, TntdSelect } from 'tntd'
  1. 更改配置
// 使用全新的空状态插画
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>
  )
}

Package Sidebar

Install

npm i tntd

Weekly Downloads

161

Version

3.0.0-beta.8

License

MIT

Unpacked Size

25.3 MB

Total Files

2785

Last publish

Collaborators

  • anthonyli
  • xiaofei.wang
  • ezios
  • zhouzefei
  • bruceliu68
  • bernardzhang
  • td-tnt
  • xiaocuicui
  • z337198954