ca-design-language 是基于 Ant Design 的定制化样式定制的一个 UI 库，主要针对中国区域化细节和行业化特质，适用于中台和大型企业级应用。本文将会详细介绍如何使用该 npm 包。
安装
npm i ca-design-language
使用
概览
按照官方的 Ant Design 使用方法，可以通过 babel-plugin-import 按需导入 ca-design-language 中的组件，如下所示：
import { Button } from 'ca-design-language';定制化
ca-design-language 针对中国区域化细节和行业化特质进行了全方位的涉及，现在可以借助 config-overrides.js 完成个性化定制：
-- -------------------- ---- -------
----- ---------------------- - --------------------------------------------
-------------- - -------- ---------------- ---- -
------ - ------------------------------
------------------ -----
----------- -
--------------------------
---------------- ---------
-
---------- -----
------ -------
--修改后 primary-color 为绿色。
具体使用场景
以下代码展示如何使用 ca-design-language 定制化的组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- ---------------------
------ -----------------------------------------------------
-------- ----- -
------ -
-----
------- -------------------------------
------
--
-
-------------------- --- ---------------------------------不难看出，该组件库也是基于 Ant Design 开发的，只需要将组件的引入改成自己需求的组件即可轻松定制化自己的组件库。
深度
除了以上几部分介绍，针对一些常用组件进行了更深入的讲解。
Button
Button 增加了三个类型：error、warning 和 info。
可以借助 config-overrides.js 定制 Button 组件样式：
-- -------------------- ---- -------
----- ---------------------- - --------------------------------------------
-------------- - -------- ---------------- ---- -
------ - ------------------------------
------------------ -----
----------- -
--------------------------
---------------- ----------
------------- ------
-
---------- -----
------ -------
--DatePicker
原生的 DatePicker 组件不能设置默认值，因此通过改写 DatePicker 的 getInitialState 和 componentDidMount 方法实现默认日期选中：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------
------ - ---------- - ---- ---------------------
----- ----------- ------- ---------- -
------------------ -
-------------
----- ----- - ----------- -- -------------------
---------- - -
----- ------
------ ----- -- -------------
--
-
------------------- -
-- ------------------------- -
-------------------------------------------
-
-
-
------ ------- ------------Cascader
Cascader 支持数据联动以及搜索功能：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------------
----- ------- - -
-
------ ----------
------ ------
--------- -
-
------ ----------
------ ------
--------- -
- ------ -------------- ------ ----- --
- ------ ---------- ------ ---- -
-
-
-
--
-
------ -----------
------ ------
--------- -
-
------ ---------
------ -------
--------- -- ------ ----------- ------ ----- -- - ------ ------------- ------ ---- --
-
-
-
--
----- --------- ------- --------------- -
----- - -
------ ---------
--
-------- - ----- -- -
-------------------
--------------- ----- ---
--
-------- - --------------- -- -
-----------------------------
----- ------------ - -------------------------------------- - ---
-------------------- - -----
------------- -- -
-------------------- - ------
--------------------- - -
-
------ --------------------------
------ --------------------------
------- ----
--
-
------ --------------------------
------ --------------------------
------- ----
-
--
---------------
-------- -----------------------
---
-- ------
--
-------- -
------ -
-----
---------
-----------------
------------------------
------------------------
--------------
------------------- -------
--
------
--
-
-
------ ------- ----------结语
ca-design-language 是一款非常适用于企业级应用的 UI 框架，其中还有很多细节和特点，需要进一步自行了解和研究。当然，也可以根据自己的需求，借助 npm install 安装自己需要的 UI 组件库，以支持更好的应用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554ee81e8991b448d2246