随着 Angular 的流行，为 Angular 开发的第三方库也越来越多。az-angular2-gallery 包就是其中之一。该库提供了一个可定制的图库，带有自动播放和缩放功能。此处将详细介绍如何使用 az-angular2-gallery 包，并提供示例代码方便学习。
安装
安装 az-angular2-gallery 可以通过 npm 命令行工具进行操作：
npm install az-angular2-gallery --save
接着，在 Angular 应用程序中引入模块：
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ----------------- - ---- ---------------------- ----------- ------------- --------------- -------- --------------- ------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
使用
在 HTML 中使用
在需要显示图库的组件的 HTML 文件中添加以下代码：
<az-ng-gallery [images]="images"></az-ng-gallery>
其中 images 是一个图片数组，可以像下面这样设置：
-- -------------------- ---- -------
------ - -
-
------ -------------------------------------
------- ---------------------------------------
---- --------------------------------------
--
-
------ -------------------------------------
------- ---------------------------------------
---- --------------------------------------
--
---
-图片大小及宽高比例设置
在设置 images 时，可以通过 width 和 height 字段来设置图片的大小和宽高比例。如下的代码设置所有图片的宽度和高度都为 300px，并宽高比例为 16:9：
-- -------------------- ---- -------
------ - -
-
------ -------------------------------------
------- ---------------------------------------
---- ---------------------------------------
------ ----
------- ---
--
-
------ -------------------------------------
------- ---------------------------------------
---- ---------------------------------------
------ ----
------- ---
--
---
-更多参数设置
可以通过以下参数来进一步定制 az-angular2-gallery：
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
images |
Array |
[] |
图片数组 |
style |
Object |
{} |
添加额外样式 |
options |
Object |
{} |
配置项 |
autoPlay |
boolean |
true |
是否自动播放 |
autoPlayInterval |
number |
2000 |
自动播放时的间隔 |
zoom |
boolean |
true |
是否允许缩放 |
background |
string |
'rgba(0, 0, 0, 0.85)' |
图片预览的背景颜色 |
animate |
string |
'scale' |
图片预览的动画类型，可选值有 'slide', 'scale' |
pan |
boolean |
true |
是否允许平移图片 |
arrows |
boolean |
true |
是否显示箭头 |
arrowsSize |
number |
30 |
箭头大小 |
arrowsAutoHide |
boolean |
true |
是否自动隐藏箭头 |
previewCloseOnClick |
boolean |
true |
点击预览图片后是否立即关闭 |
previewKeyboardNavigation |
boolean |
true |
是否启用键盘导航 |
previewLoadingSpinner |
boolean |
true |
是否显示加载动画 |
示例代码
下面的例子展示了如何使用 az-angular2-gallery：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------------- ----------------------------------
--
------- --
--
------ ----- ------------ -
------ - -
-
------ -------------------------------------
------- ---------------------------------------
---- ---------------------------------------
------ -----
--
-
------ -------------------------------------
------- ---------------------------------------
---- ---------------------------------------
------ -----
--
-
------ -------------------------------------
------- ---------------------------------------
---- ---------------------------------------
------ -----
-
--
-总结
使用 az-angular2-gallery 可以轻松创建一个可定制的图库。通过本文的介绍，相信大家已经学会了如何使用该库，并对其配置参数有了更加深入的了解。祝愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c3a81e8991b448d9d6f