npm 包 @4geit/ngx-material-module 使用教程

阅读时长 5 分钟读完

简介

@4geit/ngx-material-module 是一个面向 Angular 程序员提供的扩展库,该库主要封装了一些常用的 Material Design 组件,并且这些组件都遵循 Angular Material 的设计风格和官方 API。

该库可以用于加速 Angular 项目的开发速度,并且提供了更好的可维护性和可扩展性,同时也能够使得项目的 UI 更加美观、易用。

安装

使用 npm 安装该库的方法如下:

使用

使用该库很简单,只需要在你的 Angular 项目中导入该库的模块即可。具体流程如下:

  1. 在 Angular 中引入模块:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- - ---- ----------------------------- -- ----

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

-----------
  ------------- -
    ------------
  --
  -------- -
    --------------
    ----------------- -- ----
  --
  ---------- ---
  ---------- --------------
--
------ ----- --------- - -
展开代码
  1. 在 HTML 中使用组件:

组件

该库封装了下面的 Material Design 组件:

  • buttons (具有 Material Design 按钮样式的按钮组件)
  • cards (用于显示信息的卡片组件)
  • dialogs (用于显示模态框的组件)
  • icons (用于显示 Material Design 样式的字体图标的组件)
  • inputs (具有 Material Design 输入框样式的输入框组件)
  • lists (具有 Material Design 样式的列表组件)
  • progress-bars (具有 Material Design 样式的进度条组件)
  • toolbars (具有 Material Design 样式的工具栏组件)

示例

下面给出一个使用 @4geit/ngx-material-module 的示例代码。

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

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

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

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

  ------------ -
    ----------------------------------- -
      ------ --------
      ----- - ----- --------- -
    ---
  -
-
展开代码

结论

@4geit/ngx-material-module 是一个非常实用的 Angular 库,它能够大大提高 Angular 项目的开发效率和 UI 界面的美观度,让 Angular 设计师能够更加专注于业务逻辑上的实现。

具体的使用方法在上述的文章中已经详细讲解了。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de1a5

纠错
反馈

纠错反馈