简介
@maker/ngx.layer 是一个 Angular 组件库，帮助您快速构建基于 Angular 的网站或应用程序中的层。它包含许多预制层，比如对话框、提示框等等，并支持自定义。
安装
使用 npm 进行安装：
--- ------- ---------------- ------
导入
在您的 Angular 模块中导入 ngx.layer 模块：
------ - -------------- - ---- -------------------
-----------
-------- -
--------------
-
--
------ ----- --------- - -简单示例
下面演示一个最基本的示例：创建一个简单的提示框。
创建一个按钮，并绑定点击事件。
------- --------------------------------------
在组件中定义 showMessage 方法。
------ - ------------ - ---- -------------------
-----------------
------ ----- ----------- -
------------------- ------------- ------------- --
------------- -
------------------------------ ---------
-
-常用方法
alert
alert 方法用于打开一个对话框，只包含一个按钮用于关闭对话框。
-------------- ------- ------- ------- --------- -------------- -----------------
例如：
------------------------------ -------- ----- - --------------------- ----- -------------- ---- ---
confirm
confirm 方法用于打开一个对话框，包含两个按钮用于确定和取消。
---------------- ------- ------- ------- --------- -------------- --------------------
例如：
------------------------------------- ------- -
------------------ -----
----------------- ----
-------------------- -- -
-- --------- -
------------------
-
---prompt
prompt 方法用于打开一个对话框，包含一个输入框和确定、取消两个按钮。
--------------- ------- ------- ------- --------- -------------------- -------------------
例如：
----------------------------------- ----------- -
----------------- ---------
----------------- -- -
-- ------ -
------------- - -----
-
---toast
toast 方法用于打开一个提示框，包含一个文本和一个关闭按钮。
-------------- ------- --------- -------------- -----
例如：
--------------------------------
loading
loading 方法用于打开一个加载框。
----------------- -------------- ---------
例如：
----- ----- - ---------------------------- --------------------- ---------------- -- - -------------- -- -- -- - -------------- ---
自定义样式
@maker/ngx.layer 向外部暴露了一些 CSS 变量，如果您需要自定义样式，可以覆盖这些变量。
下面是一些可用的 CSS 变量：
----------------- --------------------- -------------------------- ------------- ------------------------ ------------------ ---------------------------- ------------------------------- -------------------- --------------------------------- ---------------------
------- ------------------------------------- ----- --------- ----------- - ------------------------- -------- -------------------------------- -------- ----------------------------- ---- -------------- ----- -
总结
@maker/ngx.layer 是一个非常实用的 Angular 组件库，可以帮助您快速构建各种层。通过本文您已经学习了如何安装、导入、使用以及自定义 @maker/ngx.layer。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f89238a385564ab6d42