td-ui

td-ui 是基于 antd 的补充 ui 库，提供 antd 组件未覆盖到的组件，也提供更高一层的封装，方便企业级中后台开发。

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 全链路开发和设计工具体系。

支持环境

• 现代浏览器和 IE9 及以上。
• 支持服务端渲染。

安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install td-ui --save

$ yarn add td-ui

示例

import { Watermark } from 'td-ui';
ReactDOM.render(<Watermark />, mountNode);

引入样式：

import 'td-ui/dist/td-ui.css'; // or 'td-ui/dist/td-ui.less'

按需加载

下面两种方式都可以只加载用到的组件。

• 使用 babel-plugin-import（推荐）。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", {
        "libraryName": "td-ui",
        "libraryDirectory": "es",
        "style": "css" // `style: true` 会加载 less 文件
      }]
    ]
  }
  

  然后只需从 td-ui 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { Watermark } from 'td-ui';
  

• 手动引入

  import Watermark from 'td-ui/lib/watermark'; // 加载 JS
  import 'td-ui/lib/watermark/style/css'; // 加载 CSS
  // import 'td-ui/lib/watermark/style';         // 加载 LESS