npm 包 helio-angular-gridster 使用教程

前言

在现代 Web 前端开发中，很多时候我们需要使用各种各样的组件库来加速开发。其中， helio-angular-gridster 是一个很棒的 Angular Gridster 组件库，它提供了强大的拖拽功能，可以让我们快速地构建自适应的网格布局。本文就来介绍一下这个 npm 包的使用方法。

安装

使用 npm 安装即可：

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

使用

首先需要在 Angular 的模块中引入 HelioGridsterModule：

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

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

然后在组件中使用 helio-gridster 标签：

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

其中 options 和 layout 是组件的参数，itemChange 是一个事件，当组件中的子项发生变化时会触发该事件。而 helio-gridster-item 是组件的子组件，表示每一个子项的样式。这里需要注意：[itemComponent] 是必需的，如果不给它赋值的话，组件会抛出一个错误。

options 可以设置一些参数，例如 gridType 表示网格布局的类型，e.g.：fixed 和 scrollVertical。常用的一些 options 如下：

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

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

其中 layout 表示要显示的子项在网格布局中的位置和大小。

实例

下面是一个简单的实例，使用 helio-angular-gridster 实现了一个拖拽排序的图片列表。

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

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

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

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

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

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

HTML

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

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

CSS

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

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

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

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

结论

使用 helio-angular-gridster 可以非常方便地实现网格布局，并且拥有很多强大的功能。本文简单地介绍了如何使用 helio-angular-gridster 实现一个简单的图片列表，希望对大家有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 ops-select-range 使用教程

    什么是 ops-select-range？ ops-select-range 是一个开源的前端组件，通过它可以方便地操作 DOM 中的选区。它可以帮助开发者实现各种与选区相关的功能，例如文字样式的修改...

    3 年前
  • npm 包 preacher 使用教程

    npm 是 Node.js 的包管理器，其中有很多优秀的开源前端包供我们使用。其中，preacher 是一个可以让我们更好地阐述项目目的、逻辑以及解决方案的 npm 包。

    3 年前
  • npm 包 proximiio-cordova 使用教程

    前言 proximiio-cordova 是一款基于 Cordova 平台的 npm 包。它提供了与 proximi.io 室内定位服务平台的集成支持，并为开发者提供了简单易用的接口。

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

    准备工作 在开始使用 react-basesupsub 前，需要先安装 Node.js 和 npm。你可以在 Node.js 官网下载 Node.js，安装过程中会自动安装 npm。

    3 年前
  • npm 包 redis-component-cache 使用教程

    在前端开发中，缓存是一个重要的概念，可以大大提高应用性能。redis-component-cache 是一个基于 Redis 的通用缓存实现，可以有效缓存数据、对象和函数的返回值。

    3 年前
  • npm 包 nw-coundown 使用教程

    前言 nw-coundown 是一个基于 Node.js 平台的倒计时函数库，方便地帮助开发者实现各种倒计时功能。在日常前端开发工作中，常常需要使用倒计时功能，如登录倒计时、秒杀结束倒计时等，nw-c...

    3 年前
  • npm 包 shenyuan-coundown 使用教程

    在前端开发中，我们经常需要使用倒计时来展示某些任务的剩余时间，此时一个好用的 npm 包 shenyuan-coundown 可以帮助我们更轻松地实现这一功能。本文将详细介绍如何使用这个包来实现倒计时...

    3 年前
  • npm 包 @pablocyc/platzom 使用教程

    @pablocyc/platzom 是一个用于处理西班牙语的字符串转换工具，它可以实现多种转换，例如： 如果单词以 "ar" 结尾，将去掉 "ar" 如果单词以 "Z" 开头，加上 "pe" 前缀 ...

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

    在前端开发中，我们常常需要使用下拉框来选择内容。而 react-dropdown-autocomplete 是一个基于 React 的下拉框组件，能够实现自动完成和搜索功能，非常实用和方便。

    3 年前
  • npm 包 bg-nest 使用教程

    在前端开发中，我们可能经常会需要在网页中展示图片、视频背景等。而 bg-nest 是一款实用的 npm 包，能够轻松地帮助我们将多张图片或视频作为背景图轮换展示。 在本篇文章中，我们将为大家介绍如何使...

    3 年前
  • npm 包 @inlustra/task-runner 使用教程

    介绍 @inlustra/task-runner 是一个高度可定制化的任务运行器。它可以轻松地实现自动化任务，如打包、测试、部署等。 安装 在终端中输入以下命令： --- ------- -- ---...

    3 年前
  • npm 包 zui-vue 使用教程

    前言 近年来，Vue.js 在前端框架中崭露头角，成为了广受欢迎的前端开发框架之一。随着 Vue.js 的发展，许多插件和组件库也相继而来。其中，zui-vue 是一个基于 Bootstrap 和 V...

    3 年前
  • NPM 包 angular-web-crypto 使用教程

    简介 在 web 开发中，加密和解密是非常常见的需求。angular-web-crypto 是一个基于 Angular 和 CryptoJS 的加密库，支持多种加密算法, 包括 AES, SHA, M...

    3 年前
  • npm 包 aor-language-greek 使用教程

    在前端开发中，我们经常需要用到各种 npm 包来增强我们的应用。其中 aor-language-greek 是一个适用于 Admin-on-rest 应用的希腊语翻译包。

    3 年前
  • npm 包 verminal-dracula 使用教程

    在前端开发的日常工作中，我们经常需要使用终端来执行一些命令和操作。为了提高开发效率和工作体验，我们通常会需要对终端进行一定的美化和定制。而 verminal-dracula 就是一个非常优秀的 npm...

    3 年前
  • npm 包 nano-data-binding 使用教程

    什么是 nano-data-binding？ nano-data-binding 是一个基于 jQuery 的前端双向数据绑定库。 它可以帮助我们在前端页面上实现数据双向绑定，简单易用，不需要大量的代...

    3 年前
  • npm 包 bs-reason-apollo 使用教程

    在前端技术中，Webpack 已经成为了一个必不可少的构建工具，但是它还需要一些其他的技术和工具来协同工作。bs-reason-apollo 是一个针对 ReasonML 和 GraphQL 特别优化...

    3 年前
  • npm 包 btc-market 使用教程

    Npm 是 Node.js 的包管理器，可以帮助开发者安装、管理和共享代码，使得编写、测试、分享代码更为方便。在前端开发中，一些实用的工具和资源也可以通过 npm 包来获取和使用。

    3 年前
  • npm 包 gitbook-plugin-bg-nest 使用教程

    什么是 gitbook-plugin-bg-nest? gitbook-plugin-bg-nest 是一个为 GitBook 提供背景图片嵌套功能的 npm 包。

    3 年前
  • npm 包 node-trustly-client 使用教程

    在前端开发中，随着 Web 技术的飞速进展，越来越多的工具和技术涌现出来。其中，npm 是一个非常重要的工具，它是 Node.js 的包管理器，拥有海量的社区贡献包，提供了很多优秀的解决方案，让我们能...

    3 年前

相关推荐

    暂无文章