什么是 angularx-components
angularx-components 是一个 Angular 组件库，它包含了各种常用的 UI 组件，如按钮、表单、弹框等，这些组件都是可自定义样式的，方便快速搭建 Web 应用 UI。
安装 angularx-components
你可以通过 npm 安装 angularx-components，请在命令行终端中键入以下命令：
npm install angularx-components --save
使用 angularx-components
在你的 Angular 项目中使用 angularx-components 之前，你需要先导入组件库，可以在 app.module.ts 文件中添加如下代码：
-- -------------------- ---- -------
------ - ------------------------ - ---- ----------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -当组件库导入完毕后，你就可以在组件模板中使用组件了，以下是一个示例：
<ac-button [disabled]="true" (click)="onClick()">点击</ac-button>
说明：
<ac-button>：是一个按钮组件[disabled]：禁用属性，设置为 true 后按钮会禁用(click)：点击事件，按钮被点击时会触发该事件onClick()：点击事件处理函数
组件样式自定义
angularx-components 提供了 SCSS 的变量和 mixin 机制使样式定制更灵活。
以下为一个示例：
-- -------------------- ---- -------
------------------------- ----
---------------------------- --------
----------------- -----
------- ----------------------------------------------
---------- -
-------- ------- -
----------------- ----------------------------------- -----
-
-
------------------ -
------------- ----------------------------
-------- ------- -
----------------- ----------------------------
-
-说明：
$ac-button-*：为组件的样式变量，可以更改其值实现样式修改。@import '~angularx-components/scss/components/button';：导入组件样式。.ac-button：为按钮样式的 CSS 类名。&:hover, &:focus：按钮鼠标悬浮和聚焦状态下的样式。.ac-button-primary：为 primary 主题的按钮 CSS 类名。border-color: $ac-button-background-color;：设置边框颜色为 primary 主题的背景色。background-color: $ac-button-background-color;：设置 primary 主题的背景色。
组件清单
以下列出 angularx-components 的组件：
- Button 组件：按钮
- Checkbox 组件：复选框
- Dialog 组件：弹框
- Form 组件：表单
- Input 组件：输入框
- Radio 组件：单选框
- Select 组件：选择框
- Sidebar 组件：侧边栏
- Table 组件：表格
以上是一些常用的组件。你可以在 angularx-components 的文档中找到更多的组件和详细的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e281e8991b448d7724