简介
@maker/ngx.layer 是一个 Angular 组件库，帮助您快速构建基于 Angular 的网站或应用程序中的层。它包含许多预制层，比如对话框、提示框等等，并支持自定义。
安装
使用 npm 进行安装：
npm install @maker/ngx.layer --save
导入
在您的 Angular 模块中导入 ngx.layer 模块：
import { NgxLayerModule } from '@maker/ngx.layer';
@NgModule({
imports: [
NgxLayerModule
]
})
export class AppModule { }简单示例
下面演示一个最基本的示例：创建一个简单的提示框。
创建一个按钮，并绑定点击事件。
<button (click)="showMessage()">打开提示框</button>
在组件中定义 showMessage 方法。
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
-----------------
------ ----- ----------- -
------------------- ------------- ------------- --
------------- -
------------------------------ ---------
-
-常用方法
alert
alert 方法用于打开一个对话框，只包含一个按钮用于关闭对话框。
alert(message: string, title?: string, options?: LayerOptions): Observable<void>;
例如：
this.layerService.alert('Hello World!', '提示', {
closeOnBackdropClick: true,
closeOnEscape: true
});confirm
confirm 方法用于打开一个对话框，包含两个按钮用于确定和取消。
confirm(message: string, title?: string, options?: LayerOptions): Observable<boolean>;
例如：
this.layerService.confirm('你确定要删除吗?', '删除确认', {
confirmButtonText: '删除',
cancelButtonText: '取消'
}).subscribe(confirm => {
if (confirm) {
this.deleteItem();
}
});prompt
prompt 方法用于打开一个对话框，包含一个输入框和确定、取消两个按钮。
prompt(message: string, title?: string, options?: LayerPromptOptions): Observable<string>;
例如：
this.layerService.prompt('请输入你的名字', '欢迎来到我的主页', {
inputPlaceholder: '请输入你的名字'
}).subscribe(name => {
if (name) {
this.userName = name;
}
});toast
toast 方法用于打开一个提示框，包含一个文本和一个关闭按钮。
toast(message: string, options?: LayerOptions): void;
例如：
this.layerService.toast('保存成功');loading
loading 方法用于打开一个加载框。
loading(options?: LayerOptions): LayerRef;
例如：
const layer = this.layerService.loading();
this.http.post('xxx', {}).subscribe(() => {
layer.close();
}, () => {
layer.close();
});自定义样式
@maker/ngx.layer 向外部暴露了一些 CSS 变量，如果您需要自定义样式，可以覆盖这些变量。
下面是一些可用的 CSS 变量：
-- -------------------- ---- ------- ----------------- --------------------- -------------------------- ------------- ------------------------ ------------------ ---------------------------- ------------------------------- -------------------- --------------------------------- ---------------------
@import '~@maker/ngx.layer/styles/index.css';
:host ::ng-deep .layer-wrap {
--layer-background-color: #f8f8fc;
--layer-button-background-color: #f8f8fc;
--layer-button-border-radius: 5px;
--layer-color: #333;
}总结
@maker/ngx.layer 是一个非常实用的 Angular 组件库，可以帮助您快速构建各种层。通过本文您已经学习了如何安装、导入、使用以及自定义 @maker/ngx.layer。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6d42