npm 包 ng5-gallery 使用教程

如何在你的 Angular5+ 应用程序中使用 ng5-gallery 包并构建美观的图库。在本文中，我们将学习如何在 Angular5+ 项目中使用 ng5-gallery 包来建立一个逼真的图片浏览器。

步骤

安装依赖

首先我们得安装 ng5-gallery 的 npm 包：

--- ------- ----------- ------

同时，我们还需要安装包之所以需要的第三方库：

--- ------- -------- ------

现在，我们已经为我们的项目设置了所需的所有依赖项。

引用库

现在，在我们的应用程序中，让我们找到 app.module.ts 文件并导入 ng5-gallery：

------ - ---------------- - ---- --------------

然后添加 Ng5GalleryModule 到你的应用程序的 imports 数组中：

-------- -
  ----------------
-

我们已经为我们的应用程序添加了 ng5-gallery 依赖项。

创建Image列表

在应用程序的组件或服务中，我们需要定义一个图片对象数组，这将包含我们的图像路由，标题，副标题等信息。

------ ----- ------------ -
  -------------- ----------------- - -
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    ---
  --
-

这就是我们的图库将显示的图像列表。

添加组件

现在手动添加一个组件到 HTML 文件中：

------------ -------------------------- ---------------------------------------

galleryOptions 是配置项，允许我们控制 gallery 的一些特性，例如每行中的图像数量，缩略图大小，图像放大比例等。

--------------- ------------------- - -
  -
    ------ ------
    -------------- -------------------------------
    -------------------- - ------ ------- ------- ------ --
    ---------- --------------------------
    ------------- ---
    ------------------ --
    --------------- --
    ------------------ ---
    ---------------- --
    --------------- --------------------------
    ------------------- --
    ------ -----
    ------------ -----
    ----------- -----
    ----------------- -----
    ---------------- -----
    ---------------- --
    -------------------------- --
    ------------------------ --
    ------------ -
      -
        ------ ----
        ------- ----
        ------------------ --
        --------------- --
        ------------------ ---
        ---------------- --
        -------------------------- --
        ------------------------ --
      --
      -
        ------ ----
        ------- ----
        ------------------ --
        --------------- --
        ------------------ ---
        ---------------- --
        -------------------------- --
        ------------------------ --
      --
      -
        ------ -----
        ------- -----
        ------------------ --
        --------------- --
        ------------------ ---
        ---------------- --
        -------------------------- --
        ------------------------ --
      --
      -
        ------ -----
        ------- -----
        ------------------ --
        --------------- --
        ------------------ ---
        ---------------- --
        -------------------------- --
        ------------------------ --
      -
    -
  -
--

现在，我们已经将 gallery 添加到我们的 HTML 文件中，并为它设置了 options 和 images 属性。

运行示例，我们可以看到自动构建一个漂亮的图库，内部包含滑动缩略图，图像放大标记和对其他功能的自定义控制。

下面是示例代码：

------------ -------------------------- ---------------------------------------
------ - ---------- ------ - ---- ----------------
------ -
  ------------------
  ----------------
  --------------------
  ------------------------
  -------------------
- ---- --------------

------------
  --------- -----------
  ------------ -----------------------
  ---------- -----------------------
--
------ ----- ------------ ---------- ------ -
  ----- - ------ ------- ---------
  --------------- ------------------- - -
    -
      ------ ------
      -------------- -------------------------------
      -------------------- - ------ ------- ------- ------ --
      ---------- --------------------------
      ------------- ---
      ------------------ --
      --------------- --
      ------------------ ---
      ---------------- --
      --------------- --------------------------
      ------------------- --
      ------ -----
      ------------ -----
      ----------- -----
      ----------------- -----
      ---------------- -----
      ---------------- --
      -------------------------- --
      ------------------------ --
      ------------ -
        -
          ------ ----
          ------- ----
          ------------------ --
          --------------- --
          ------------------ ---
          ---------------- --
          -------------------------- --
          ------------------------ --
        --
        -
          ------ ----
          ------- ----
          ------------------ --
          --------------- --
          ------------------ ---
          ---------------- --
          -------------------------- --
          ------------------------ --
        --
        -
          ------ -----
          ------- -----
          ------------------ --
          --------------- --
          ------------------ ---
          ---------------- --
          -------------------------- --
          ------------------------ --
        --
        -
          ------ -----
          ------- -----
          ------------------ --
          --------------- --
          ------------------ ---
          ---------------- --
          -------------------------- --
          ------------------------ --
        -
      -
    -
  --
  -------------- ----------------- - -
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    --
    -
      ------ ----------------------------------------
      ------- ----------------------------------------
      ---- -----------------------------------------
      ------------ ------- -------
      ---- -----------------------
    -
  --

  ----------- ---- --
-

以上就是使用 ng5-gallery 构建图库的详细教程，希望可以帮助大家构建出更好的图库。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005667581e8991b448e28b2

阅读全文

猜你喜欢

  • npm 包 bacnet-enums 使用教程

    在前端开发中，我们时常需要使用各种第三方库和工具来简化我们的工作流程，其中 npm 是前端开发者最常用的包管理工具之一。npm 上有许多优秀的包，其中包括 bacnet-enums，这是一个专门为 B...

    3 年前
  • npm 包 mocha-fork 使用教程

    简介 mocha-fork 是一个基于 Mocha 的 JavaScript 单元测试框架。它与已有的 Mocha 有所不同，它允许运行测试程序时，利用多线程并发执行，以提高测试的效率。

    3 年前
  • npm 包 @bravobit/invoice-pdf 使用教程

    引言 随着电子商务的发展，越来越多的公司和个人需要发票来管理他们的财务和税务。因此，很多开发者需要编写生成发票的应用程序。 @bravobit/invoice-pdf 是一个 npm 包，可以帮助开发...

    3 年前
  • npm 包 react-country-region-selector-material-ui 使用教程

    前言 在前端开发中，我们常常需要使用到一些国家和地区信息。有些情况下，我们需要展示一个下拉框，让用户选择特定的国家或地区，进而展示相应的内容。针对这个需求，我们可以使用 react-country-r...

    3 年前
  • npm 包 @mindbox/tml-js-react-typings 使用教程

    在国际化的前端开发过程中，我们常常使用到翻译管理工具和框架，其中一个常见的工具就是 Translation Markup Language (TML)。在 React 项目中使用 TML，我们可以借助...

    3 年前
  • npm包 function-tick 使用教程

    介绍 在前端开发中，经常会遇到需要定时执行某个函数的场景。Node.js的setInterval可以用来实现这个功能，但是它有一个缺点：如果某次执行函数的时间过长，就会导致下一次执行时间不准确。

    3 年前
  • npm 包 botkit-rasa 使用教程

    在前端开发中，使用机器人应用程序的需求不断增加，而使用 botkit-rasa 这个 npm 包可以便捷地实现这一需求。本文将详细介绍如何使用 botkit-rasa 实现机器人应用程序，并为读者提供...

    3 年前
  • npm 包 wave-collapse 使用教程

    在前端开发中，为了提升效率和复用性，通常需要引入各种各样的第三方工具和库。而 npm 是前端开发中最常使用的包管理器，它能够快速便捷地搜索并安装各种前端包和工具。而今天我们要介绍的是一款名为 wave...

    3 年前
  • npm 包 asset-pipe-css-reader 使用教程

    前端开发需要不断地优化页面的加载速度和性能，其中一个重要的方面就是减少网络请求和文件体积。为了实现这个目标，我们可以通过将 CSS 文件打包合并来减少请求次数。本文将介绍一个 npm 包，它可以读取打...

    3 年前
  • npm 包 post-json-for-jquery 使用教程

    在前端开发过程中，我们经常会需要向后台发送 JSON 数据。而 jQuery 是一个流行的 JavaScript 库，可以方便地通过 AJAX 发送数据。在这篇文章中，我们将介绍一个叫做 post-j...

    3 年前
  • npm 包 Splitxlsx 使用教程

    随着前端技术的不断发展，现在的前端工程师已经不再只需要掌握基本的 HTML、CSS 和 JavaScript 等语言，还需要熟练掌握一些工具和库，以提升工作效率和代码质量。

    3 年前
  • npm包 `react-native-percent-circle` 使用教程

    简介 react-native-percent-circle 是一个 React Native 的圆形进度条组件，它可以让开发者快速的构建出美观实用的进度条功能，而且它还提供了丰富的自定义属性，让开发...

    3 年前
  • npm 包 marketing-data-file-uploader 使用教程

    在现今的数据驱动时代，市场营销数据是构建营销策略与业务增长的关键指标。然而，市场营销数据的整理与分析一直是一个令人头疼的问题。而 npm 包 marketing-data-file-uploader ...

    3 年前
  • npm包 ez-fasta使用教程

    在进行前端开发时，常常需要使用到许多工具和框架，其中npm包就是一个非常重要的组成部分。本文将介绍如何使用npm包 ez-fasta，对于需要处理fasta文件的前端开发者来说，ez-fasta是一个...

    3 年前
  • npm 包 fastify-ioredisjs 使用教程

    简介 fastify-ioredisjs 是一个基于 ioredis 的 fastify 插件。它提供了快速而稳定的 Redis 服务器连接。该插件是为 Node.js 8 及以上版本设计的，并使用 ...

    3 年前
  • npm 包 Lucyunit 使用教程

    简介 Lucyunit 是一个轻量级的 JavaScript 单元测试框架，可用于 Web 前端项目中的单元测试。通过对函数进行单元测试，我们能够更有效地发现代码中的 bug，并提高代码的健壮性和可维...

    3 年前
  • npm 包 koa-boost 使用教程

    简介 koa-boost 是一个基于 Koa 2 的轻量级快速开发框架，它集成了大量常用的中间件，并支持自定义扩展，可以让开发者轻松构建高性能的 Web 应用程序。

    3 年前
  • npm 包 mini.css-react 使用教程

    当我们在前端开发中需要快速构建漂亮的界面时，我们通常要调用一些 CSS 库或框架来实现。但是，在不断变化的前端环境中，如何在一个不断变化的代码库中保持一致的样式呢？这时候 mini.css-react...

    3 年前
  • npm 包 mini.css-preact 使用教程

    什么是 mini.css-preact? mini.css-preact 是一个轻量级的 CSS 框架，它提供了许多实用的 CSS 类供开发者使用，可以轻松地构建出漂亮的界面。

    3 年前
  • npm 包 react-proslider 使用教程

    前言 在前端开发中，许多开发者喜欢使用 React 进行开发，React 的组件化和虚拟 DOM 可以有效地提高开发效率。当我们需要一个 slider 轮播组件时，react-proslider 是一...

    3 年前

相关推荐

    暂无文章