npm 包 ca-design-language 使用教程

ca-design-language 是基于 Ant Design 的定制化样式定制的一个 UI 库，主要针对中国区域化细节和行业化特质，适用于中台和大型企业级应用。本文将会详细介绍如何使用该 npm 包。

安装

--- - ------------------

使用

概览

按照官方的 Ant Design 使用方法，可以通过 babel-plugin-import 按需导入 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

阅读全文

猜你喜欢

  • npm 包 ng2-handsontable-js 使用教程

    在前端开发中，我们需要使用各种工具来帮助我们更高效地完成开发任务。npm 是一种非常流行的包管理工具，而 ng2-handsontable-js 这个 npm 包则是一个非常有用的前端工具，它可以帮助...

    2 年前
  • npm 包 rmc-svg-loader 使用教程

    在前端开发中，图形素材常常是不可或缺的。在使用矢量图形素材时，为了实现多样化的图形展示效果，我们需要对 SVG 文件进行操作。而 rmc-svg-loader 就是一个能够帮助我们操作 SVG 文件的...

    2 年前
  • npm 包 vue-sharing 使用教程

    简介 vue-sharing 是一款基于 Vue.js 的分享组件。它提供了一种快速、简单、易用和高度可定制的方式来实现社交分享功能。 安装和使用 安装 通过 npm 安装 vue-sharing： ...

    2 年前
  • npm 包 @jrhames/docco 使用教程

    简介 在前端开发中，我们通常需要编写大量的代码来实现各种不同的需求。在这个过程中，我们需要及时地记录自己的代码并生成代码文档，以便于日后的维护和阅读。这时，一个好用的文档生成工具就显得尤为重要。

    2 年前
  • npm 包 atcon 使用教程

    简介 atcon 是一个轻量级的 Javascript 模板引擎，可以在前端和后端运行，具有快速、简单、灵活的特点，支持模板继承、模板缓存、变量输出等特性。 本教程将详细介绍如何使用 atcon，包括...

    2 年前
  • npm 包 bootjs-auth 使用教程

    介绍 bootjs-auth 是一个 Node.js 的 npm 包，提供了一个用于 Web 应用的用户认证框架。它支持多种认证方式，包括本地用户认证、OAuth2.0 和 OpenID Connec...

    2 年前
  • npm 包 fireglass-intravenous 使用教程

    介绍 fireglass-intravenous 是一个基于 Angular 的依赖注入库，相比于 Angular 的原生依赖注入，它有更好的性能、更方便的使用与更多的配置选项。

    2 年前
  • npm 包 gg-utils 使用教程

    引言 npm（Node Package Manager）是 Node.js 的包管理工具，可以方便地安装、升级、卸载 Node.js 模块或库。而 gg-utils 则是一个 npm 包，集成了一些常...

    2 年前
  • npm 包 j-ng2-floating-button 使用教程

    1. 简介 j-ng2-floating-button 是一款由 Angular 团队开发的浮动按钮组件，它可以方便地在页面上添加浮动按钮，并提供了多种配置选项，如按钮样式、位置、动画等。

    2 年前
  • npm 包 js-struct-array 使用教程

    前言 在前端开发中，我们经常会涉及到对数据的处理和存储，而 js-struct-array 就是一个能够更好地帮助我们实现这些功能的npm包。本文将介绍 js-struct-array 的基本使用方式...

    2 年前
  • npm 包 lapi-test 使用教程

    介绍 lapi-test 是一个使用 Node.js 的 HTTP 测试库，其目标是使测试 HTTP 请求变得更加简单和直观。 与其他的 Node.js HTTP 测试工具相比，lapi-test 具...

    2 年前
  • npm包nefariousnodejs使用教程

    在现代Web开发领域中，使用npm（Node.js 包管理器）来管理JavaScript库和工具已经成为常态。在众多npm包中，nefariousnodejs是一个重要的npm包。

    2 年前
  • npm 包 player-56s 使用教程

    在前端开发中，使用音频播放器可以为网站添加丰富的音效和音乐。npm 包 player-56s 是一款轻量级的基于 Howler.js 的音频播放器，支持自定义样式和事件绑定。

    2 年前
  • npm 包 sax1johno-orion 使用教程

    在前端开发中，经常需要处理 XML 或 HTML 格式的数据。而 sax1johno-orion 就是一款用来解析 XML 或 HTML 格式的 npm 包。 什么是 sax1johno-orion ...

    2 年前
  • npm 包 td-angular-barcode 使用教程

    简介 在前端开发中，经常需要生成条形码以及二维码来满足业务需求。td-angular-barcode 是一个基于 Angular 的 npm 包，需要 Angular 版本 >= 4。

    2 年前
  • npm 包 vue-tabpanel 使用教程

    简介 vue-tabpanel 是一个基于 Vue.js 的标签面板组件库，可以方便地实现多个标签页的切换和内容显示。使用 vue-tabpanel 可以节省前端开发的时间，并提高客户体验。

    2 年前
  • npm 包 autostylelint 使用教程

    在前端开发中，代码的规范和风格非常重要。好的代码风格能够提高代码的可读性和可维护性，防止由于风格不一致而引起的错误和混乱。而 autostylelint 包就是一个可以帮助我们统一代码风格、自动修正代...

    2 年前
  • npm 包 dove-jwt 使用教程

    前言 在前端开发中，我们常常需要实现用户认证和授权等功能。JSON Web Token（JWT）是一种安全的方法，用于跨网络进行认证和授权。npm 上有许多可用的 jwt 包，其中 dove-jwt ...

    2 年前
  • npm 包 tin-refresh-jquery 使用教程

    在前端开发中，我们经常需要在页面中添加一些实时刷新的效果。此时，使用 tin-refresh-jquery 这个 npm 包可以让我们轻松地实现这一功能。本文将为你详细介绍该 npm 包的使用方法。

    2 年前
  • npm包sails-generate-migrate使用教程

    在 Web 应用程序开发中，数据库迁移是一个非常重要的话题。它允许开发人员对数据库模式进行更改，并保持数据的一致性。Sails.js 是一个流行的 Node.js Web 框架，它提供了一个非常好的解...

    2 年前

相关推荐

    暂无文章