npm 包 @mideanet/react-grid-layout 使用教程

在前端开发中，常常需要使用到网格布局，以便于页面的排版和组件的布局。@mideanet/react-grid-layout 是一个常用的 React 组件库，以下是它的使用教程。

安装 @mideanet/react-grid-layout

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

@mideanet/react-grid-layout 的基本使用

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

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

cols 属性设置了网格布局的列数，rowHeight 属性设置了每一行的高度，width 属性设置了网格布局的总宽度。

组件在网格布局中的位置和尺寸由 data-grid 属性来控制，其中 x 属性表示组件左上角在网格布局中的列数，y 属性表示组件左上角在网格布局中的行数，w 属性表示组件占用的列数，h 属性表示组件占用的行数，static 属性表示组件是否固定（不可拖拽和缩放）。

@mideanet/react-grid-layout 的高级使用

支持拖拽和缩放

若想要让组件可拖拽和缩放，则需要在 GridLayout 组件中加入 draggableHandle 和 resizableHandle 属性。

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

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

在上面的示例中，.dragHandle 表示拖拽的手柄，.resizeHandle 表示缩放的手柄。

支持响应式布局

若想支持响应式布局，则需要在 GridLayout 中加入 breakpoints 和 layouts 属性。

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

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

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

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

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

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

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

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

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

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

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

在上面的示例中，breakpoints 指定了断点，layouts 指定了不同断点下的网格布局。

计算网格布局

若想要计算网格布局的位置和尺寸，则需要引入 react-grid-layout-utils。

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

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

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

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

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

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

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

在上面的示例中，引入了 calcGridItemPosition 和 calcGridItemSize 方法，分别用来计算组件的位置和尺寸。getSize 方法用来设置组件的样式。

总结

本文介绍了 @mideanet/react-grid-layout 的基本用法和高级用法，并展示了实际的代码示例。希望对读者能有所帮助，让读者在前端开发中更加得心应手。

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

阅读全文

猜你喜欢

  • npm 包 cubic-roots 使用教程

    介绍 cubic-roots 是一个在 JavaScript 中求解三次方程根的 npm 包。它可以用于许多前端项目中，尤其是需要求解三次方程根的科学计算。 安装 使用 npm 进行安装： --- -...

    3 年前
  • [前端]npm 包 ruskjs 使用教程

    #[前端]npm 包 ruskjs 使用教程 ##介绍 Ruskjs是一个基于React的自动化表单输入组件库。它能够智能地根据数据结构和设置自动生成表单、验证器和提示信息。

    3 年前
  • npm 包 bittrex.api 使用教程

    简介 bittrex.api 是针对 bittrex 交易所所开发的一款 Node.js 的 npm 包。它提供了一组简单的接口，可以轻松地对指定的 bittrex 市场进行交易，查询和管理操作。

    3 年前
  • npm 包 elasticsearch-informix-tool 使用教程

    简介 elasticsearch-informix-tool 是基于 Node.js 开发的一个 npm 包，主要用于方便地将 Informix 数据库中的数据导入到 Elasticsearch 中进...

    3 年前
  • npm 包：jsx-isomorphic-fetch 使用教程

    在前端开发中，我们经常需要使用到 fetch 请求获取数据。然而，当我们需要服务端渲染页面时，fetch 请求就不能直接发起了，因为它只能在浏览器环境下使用。为了解决这个问题，我们需要使用 isomo...

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

    Redis 是一个内存中的数据结构存储系统，常用于缓存、消息队列、分布式锁等。redis-console 是一个命令行工具，方便用户在命令行中操作 Redis。 安装 在命令行输入以下命令即可安装 r...

    3 年前
  • npm 包 slick-carousel-no-font-no-png 使用教程

    在前端开发中，轮播图是一个常见的组件。而 Slick Carousel 是一个非常流行的轮播图组件，它提供了强大的功能和丰富的样式库。然而，Slick Carousel 默认情况下需要引入大量的字体和...

    3 年前
  • npm 包 uglyjs 使用教程

    简介 uglyjs 是一个基于 JavaScript 代码压缩和美化的 npm 包。它可以轻松地将代码压缩成最小的形式，优化代码性能并提高运行速度。而且它还可以将代码美化成易懂的格式，有助于代码阅读与...

    3 年前
  • npm 包 @botsfactory/botframework-watson-recognizer 使用教程

    作为一名前端工程师，我们经常需要使用各种 npm 包来辅助我们完成项目的开发。其中，@botsfactory/botframework-watson-recognizer 是一款非常实用的 npm 包...

    3 年前
  • npm 包 resourceful-xhr 使用教程

    在现代网站和应用程序的开发中，数据的请求和响应是非常关键的一部分。由于 AJAX 已成为前端开发的基础技术之一，许多工具和库已经被设计出来，使得在 JavaScript 中执行 AJAX 请求变得非常...

    3 年前
  • NPM 包 @reepay/reepay-payment 使用教程

    介绍 @reepay/reepay-payment 是一个方便开发者在网站上接入 Reepay 支付的 NPM 包。Reepay 是一个支付解决方案提供商，旨在为 B2B 和 B2C 行业提供高质量的...

    3 年前
  • npm 包 @xindi/js-personal-styles 使用教程

    介绍 @xindi/js-personal-styles 是一款用于前端开发的 npm 包，可以快速定制化个人风格样式工具，简化前端开发流程。 安装 使用 npm 安装该包，在命令行中输入： --- ...

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

    前言 在前端开发中，我们经常会遇到需要打印日志的情况，而且打印的日志内容也很多元化，比如要加上请求参数、响应状态码等等。在这种情况下，使用常规的 console.log 就显得力不从心了。

    3 年前
  • npm 包 ng2-timeline-simple 使用教程

    介绍 ng2-timeline-simple 是一个基于 Angular 2+ 的简单时光轴组件，可用于展示时间线等信息。本文将介绍如何使用该组件，使用前需要安装 Angular CLI 和 Node...

    3 年前
  • npm 包 cl-gen 使用教程

    #npm 包 cl-gen 使用教程 在前端开发中，我们经常需要使用到一些生成代码的方法，比如构建项目、创建组件等。而 cl-gen 则是一个非常方便的 npm 包，可以帮助我们快速生成各种代码文件。

    3 年前
  • npm 包 insidesales-components-dev 使用教程

    介绍 insidesales-components-dev 是一个基于 React 的 UI 组件库，为开发者提供了各种高质量的组件，包括按钮、表格、卡片、上传等等，来快速开发现代化 Web 应用程序...

    3 年前
  • npm 包 ecmascript-sass-webpack-starter 使用教程

    介绍 ecmascript-sass-webpack-starter 是一个适用于前端开发的 npm 包，它提供了一整套基于 ECMAScript、Sass 和 Webpack 的开发环境，方便开发者...

    3 年前
  • npm 包 ng-conversational 使用教程

    什么是 ng-conversational？ ng-conversational 是一个 Angular 库，它提供了一种可定制的聊天机器人 UI 组件。它可以帮助开发人员快速构建聊天机器人应用，并且...

    3 年前
  • npm 包 @p4d/rpi 使用教程

    概述 @p4d/rpi 是一个基于树莓派的硬件操作接口库。如果你需要通过 Node.js 编写树莓派相关项目，那么这个库可以帮助你快速开发。它提供了许多树莓派的GPIO，PWM，SPI，I2C等接口的...

    3 年前
  • npm 包 @pluritech/pagination 使用教程

    介绍 在前端开发中，分页是一个常见需求。可以使用 @pluritech/pagination 这个 npm 包来方便地实现分页。 @pluritech/pagination 是一个轻量级、易用、不依赖...

    3 年前

相关推荐

    暂无文章