# td-ui > 同盾ui组件库 Latest version **3.0.4** (published 2019-11-08) · UNLICENSED license · 0 weekly downloads ## Install ```sh npm install td-ui pnpm add td-ui yarn add td-ui bun add td-ui ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; large bundle. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.0.4 | | Published | 2019-11-08 | | First published | 2017-06-05 | | Weekly downloads | 0 | | License | UNLICENSED | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 58 | | Unpacked size | 22.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | peggyhao, xiaofei.wang, yacan8, zhengfeng.yao | ## Links - npm: https://www.npmjs.com/package/td-ui - Repository: https://gitlab.tongdun.cn/app/td-ui - Homepage: http://tdesign.tongdun.me/ - Issues: https://gitlab.tongdun.cn/app/td-ui/issues - npm.io page: https://npm.io/package/td-ui ## Dependencies (58) - [qs](https://npm.io/package/qs.md) ^6.7.0 - [raf](https://npm.io/package/raf.md) ^3.4.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [moment](https://npm.io/package/moment.md) ^2.24.0 - [omit.js](https://npm.io/package/omit.js.md) ^1.0.0 - [rc-form](https://npm.io/package/rc-form.md) ^2.4.0 - [rc-menu](https://npm.io/package/rc-menu.md) ~7.4.12 - [rc-rate](https://npm.io/package/rc-rate.md) ~2.5.0 - [rc-tabs](https://npm.io/package/rc-tabs.md) ~9.6.0 - [rc-tree](https://npm.io/package/rc-tree.md) ~2.1.0 - [rc-util](https://npm.io/package/rc-util.md) ^4.5.1 - [warning](https://npm.io/package/warning.md) ~4.0.2 - [rc-steps](https://npm.io/package/rc-steps.md) ~3.4.1 - [rc-table](https://npm.io/package/rc-table.md) ~6.5.0 - [rc-dialog](https://npm.io/package/rc-dialog.md) ~7.4.0 - [rc-drawer](https://npm.io/package/rc-drawer.md) ~1.9.3 - [rc-select](https://npm.io/package/rc-select.md) ~9.1.0 - [rc-slider](https://npm.io/package/rc-slider.md) ~8.6.5 - [rc-switch](https://npm.io/package/rc-switch.md) ~1.9.0 - [rc-upload](https://npm.io/package/rc-upload.md) ~2.6.0 - [array-move](https://npm.io/package/array-move.md) ^2.1.0 - [classnames](https://npm.io/package/classnames.md) ~2.2.6 - [enquire.js](https://npm.io/package/enquire.js.md) ^2.1.6 - [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 - [rc-animate](https://npm.io/package/rc-animate.md) ^2.5.4 - [rc-tooltip](https://npm.io/package/rc-tooltip.md) ~3.7.3 - [rc-trigger](https://npm.io/package/rc-trigger.md) ^2.6.2 - [dom-closest](https://npm.io/package/dom-closest.md) ^0.2.0 - [rc-calendar](https://npm.io/package/rc-calendar.md) ~9.14.0 - [rc-cascader](https://npm.io/package/rc-cascader.md) ~0.17.0 - [rc-checkbox](https://npm.io/package/rc-checkbox.md) ~2.1.5 - [rc-collapse](https://npm.io/package/rc-collapse.md) ~1.11.1 - [rc-dropdown](https://npm.io/package/rc-dropdown.md) ~2.4.1 - [rc-mentions](https://npm.io/package/rc-mentions.md) ~0.3.1 - [rc-progress](https://npm.io/package/rc-progress.md) ~2.3.0 - [react-slick](https://npm.io/package/react-slick.md) ~0.24.0 - [dom-to-image](https://npm.io/package/dom-to-image.md) ^2.6.0 - [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0 - [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x - [css-animation](https://npm.io/package/css-animation.md) ^1.5.0 - [rc-pagination](https://npm.io/package/rc-pagination.md) ~1.20.1 - [rc-time-picker](https://npm.io/package/rc-time-picker.md) ~3.6.1 - [rc-tree-select](https://npm.io/package/rc-tree-select.md) ~2.9.1 - [rc-input-number](https://npm.io/package/rc-input-number.md) ~4.4.0 - [rc-notification](https://npm.io/package/rc-notification.md) ~3.3.0 - [react-lazy-load](https://npm.io/package/react-lazy-load.md) ^3.0.13 - [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1 - [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ~2.0.0 - [array-tree-filter](https://npm.io/package/array-tree-filter.md) ^2.1.0 - [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.0.8 - [rc-editor-mention](https://npm.io/package/rc-editor-mention.md) ^1.1.7 - [react-virtualized](https://npm.io/package/react-virtualized.md) ^9.21.1 - [@types/react-slick](https://npm.io/package/@types/react-slick.md) ^0.23.3 - [react-sortable-hoc](https://npm.io/package/react-sortable-hoc.md) ^1.9.1 - [@ant-design/icons-react](https://npm.io/package/@ant-design/icons-react.md) ~2.0.0 - [react-lifecycles-compat](https://npm.io/package/react-lifecycles-compat.md) ^3.0.4 - [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.0 - [@ant-design/create-react-context](https://npm.io/package/@ant-design/create-react-context.md) ^0.2.4 ## Recent versions - 3.0.4 (latest) — 2019-11-08 - 1.2.6 — 2019-10-16 - 1.2.5 — 2019-10-16 - 1.2.4 — 2019-10-16 - 2.4.19 — 2019-09-29 - 2.4.18 — 2019-09-29 - 3.0.3 — 2019-09-29 - 3.0.2 — 2019-08-13 - 3.0.1 — 2019-08-13 - 3.0.0 — 2019-07-12 - 3.0.0-alpha.2 — 2019-07-09 - 3.0.0-alpha.1 — 2019-07-09 - 2.4.17 — 2019-04-29 - 2.4.16 — 2019-03-21 - 2.4.15 — 2019-03-11 - … 155 more at https://npm.io/package/td-ui/versions ## README `td-ui` 是基于 antd 的补充 ui 库，提供 antd 组件未覆盖到的组件，也提供更高一层的封装，方便企业级中后台开发。 ## 特性 - 提炼自企业级中后台产品的交互语言和视觉风格。 - 开箱即用的高质量 React 组件。 - 使用 TypeScript 构建，提供完整的类型定义文件。 - 全链路开发和设计工具体系。 ## 支持环境 - 现代浏览器和 IE9 及以上。 - 支持服务端渲染。 ## 安装 ### 使用 npm 或 yarn 安装 **我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 ```bash $ npm install td-ui --save ``` ```bash $ yarn add td-ui ``` ## 示例 ```jsx import { Watermark } from 'td-ui'; ReactDOM.render(, mountNode); ``` 引入样式： ```jsx import 'td-ui/dist/td-ui.css'; // or 'td-ui/dist/td-ui.less' ``` ### 按需加载 下面两种方式都可以只加载用到的组件。 - 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。 ```js // .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "td-ui", "libraryDirectory": "es", "style": "css" // `style: true` 会加载 less 文件 }] ] } ``` 然后只需从 td-ui 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。 ```jsx // babel-plugin-import 会帮助你加载 JS 和 CSS import { Watermark } from 'td-ui'; ``` - 手动引入 ```jsx import Watermark from 'td-ui/lib/watermark'; // 加载 JS import 'td-ui/lib/watermark/style/css'; // 加载 CSS // import 'td-ui/lib/watermark/style'; // 加载 LESS ``` --- _Source: https://npm.io/package/td-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._