什么是 ng-components
ng-components 是一款基于 Angular 框架封装的 UI 组件库，可以帮助开发者快速构建美观、易用的前端界面。
安装
要使用 ng-components，首先需要安装和配置 Angular 环境。
进入项目所在文件夹，执行以下命令：
npm install ng-components --save
这会将 ng-components 安装到项目中，并在 package.json 中添加依赖。
使用
在 app.module.ts 中导入 ng-components 中需要使用到的组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
-- ----
------ - ----------------- - ---- ----------------
-----------
------------- -
-------------
----------------- -- ----
--
-------- -
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在需要使用组件的 HTML 文件中，使用标签名字来调用：
<nc-button>点击我</nc-button>
组件列表
ng-components 中包含了大量常用的 UI 组件，包括按钮、表单、模态框、提示框等。
按钮
ng-components 中的按钮组件有多种不同的类型和样式可供选择，使用时只需要在标签中加入相应的属性即可。
属性：
- type：按钮类型，可选值为 "primary"、"success"、"warning"、"danger" 和 "info"。默认为 "default"。
- size：按钮尺寸，可选值为 "large"、"medium" 和 "small"。默认为 "medium"。
- disabled：按钮是否禁用。默认为 false。
代码：
-- -------------------- ---- ------- --------------------------- ---------- ------------------------------- ---------- ------------------------------- ---------- ------------------------------- ---------- ------------------------------ ---------- ---------------------------- ---------- ---------------------------- ---------- ----------------------------- ---------- ---------------------------- ---------- -------------------------
表单
ng-components 中的表单组件包括输入框、下拉框等。
输入框
属性：
- type：输入框类型，可选值为 "text"、"password"、"email"、"number"、"url" 和 "tel"。默认为 "text"。
- placeholder：输入框提示文字。默认为空。
- disabled：输入框是否禁用。默认为 false。
代码：
<nc-input type="text" placeholder="请输入用户名"></nc-input> <nc-input type="password" placeholder="请输入密码"></nc-input> <nc-input type="email" placeholder="请输入邮箱"></nc-input> <nc-input type="number" placeholder="请输入数字"></nc-input> <nc-input type="url" placeholder="请输入网址"></nc-input> <nc-input type="tel" placeholder="请输入电话号码"></nc-input> <nc-input disabled></nc-input>
下拉框
属性：
- options：下拉框选项，格式为 { value: string, label: string } 数组。
- placeholder：下拉框提示文字。默认为空。
- disabled：下拉框是否禁用。默认为 false。
代码：
<nc-select [options]="[{ value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }]"></nc-select> <nc-select [options]="[{ value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }]" placeholder="请选择"></nc-select> <nc-select [options]="[{ value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }, { value: 'orange', label: '橙子' }]" disabled></nc-select>
模态框
ng-components 中的模态框组件可以根据需要自定义标题、内容和按钮。
属性：
- visible：模态框是否可见。默认为 false。
- title：模态框标题。默认为 "提示"。
- content：模态框内容。
- confirmText：确认按钮文字。默认为 "确定"。
- cancelText：取消按钮文字。默认为 "取消"。
方法：
- onConfirm()：确认按钮点击事件回调函数。
- onCancel()：取消按钮点击事件回调函数。
代码：
<nc-modal [visible]="false" (onConfirm)="onConfirm()" (onCancel)="onCancel()"></nc-modal> <nc-modal [visible]="true" title="删除" content="确定删除吗？" (onConfirm)="onDelete()"></nc-modal> <nc-modal [visible]="true" title="提示" content="请输入姓名" confirmText="确定" cancelText="取消"></nc-modal>
提示框
ng-components 中的提示框组件包括成功、警告和错误三种类型。
属性：
- type：提示框类型，可选值为 "success"、"warning" 和 "error"。默认为 "success"。
- message：提示框内容。
代码：
<nc-message type="success" message="操作成功"></nc-message> <nc-message type="warning" message="操作失败"></nc-message> <nc-message type="error" message="网络错误"></nc-message>
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc1c