@cyber-insight/cps-ui

An enterprise-class UI design language and React-based implementation

Usage no npm install needed!

<script type="module">
  import cyberInsightCpsUi from 'https://cdn.skypack.dev/@cyber-insight/cps-ui';
</script>

README

CPS Design

一套服务于工业智能化系统的 UI 设计语言和 React 实现。

✨ 特性

  • 服务于工业级后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建，提供完整的类型定义文件。
  • 全链路开发和设计工具体系。
  • 包含通用类组件 Button、Breadcrumb、Badge、Cascader、Dropdown、DataEmpty、Grid、Icon、Loading、Popover、Pagination、Select、Tooltip、Menu、Steps、Checkbox、DatePicker、Form、InputNumber、Input、Radio、Switch、TreeSelect、Transfer、TimePicker、Upload、Avatar、Tree、Tag、Tabs、Table、Alert、Message、Notification、Progress、Spin，图标类组件Bar、Funnel、Gauge、Histogram、Heatmap、Liquidfill、Line、Pie、Ring、Radar、Scatter、Sankey、TreeChart、Waterfall 。
  • 发布 CPS Design 首页 、设计语言、介绍文档和示例等。

🖥 支持环境

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

📦 安装

npm install @cyber-insight/cps-ui --save

yarn add @cyber-insight/cps-ui

🔨 示例

import { DatePicker } from '@cyber-insight/cps-ui';
ReactDOM.render(<DatePicker />, mountNode);

引入样式：

import '@cyber-insight/cps-ui/dist/@cyber-insight/cps-ui.css';  // or '@cyber-insight/cps-ui/dist/@cyber-insight/cps-ui.less'

你也可以 按需加载组件。

TypeScript

参考 在 TypeScript 中使用

🌍 国际化

参考 国际化文档。

🔗 链接