npm 包 inferno-split-pane 使用教程

前端开发中，经常需要对页面进行布局与分割。而 inferno-split-pane 就是一款能够帮助我们更方便地实现页面分割布局的 npm 包。本文将会带您了解它的基本使用方法，以及如何在项目中实践它。

inferno-split-pane 是什么？

inferno-split-pane 是一个基于 Inferno 的轻量级 split-pane 库。其核心特性包括：

  • 可以垂直或水平分割区域；
  • 可以设置最小和最大分割大小；
  • 可以由用户拖动分隔条调整分割大小；
  • 可以与 React、Inferno 等前端框架无缝集成。

安装 & 引用 inferno-split-pane

inferno-split-pane 可以通过 npm 进行安装，使用以下命令进行安装：

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

然后，在代码中引入 divide.js 文件即可：

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

inferno-split-pane 配置 & 使用

常规使用方法如下：

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

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

以上代码实现的效果是：一个垂直分割区域，左侧宽度为 200px，右侧最小宽度为 100px，内部包含两个 div 元素，左边的 div 元素中展示 left pane，右边的 div 元素中展示 right pane。

将 split="vertical" 改为 split="horizontal"，我们可以得到一个水平分割的布局。

inferno-split-pane 可用的属性

在 inferno-split-pane 中，有很多可用的属性可以帮助您实现更加丰富多彩的交互布局。下面是常见的属性列表：

属性 说明 类型 默认值
split 手动调整尺寸的分割方向；可设置为 vertical 或 horizontal。 String 'vertical'
min 左 / 上 区域最小宽度 / 高度。 String, Number, Nullable '0'
max 左 / 上 区域最大宽度 / 高度。 String, Number, Nullable '0'
defaultSize 左 / 上 区域的默认大小，单位为像素；如果设置为 auto，则计算出来的实际大小不得小于 min 值。 String, Number, Nullable null
allowResize 表示是否允许用户调整大小。 Bool true
style 用于传递定制样式。 Object {}
onChange 调整左 / 上 区域大小时触发的回调函数。 Function null

其中，主要的参数都有解释，并且可以进行定制，这让我们能够接边更多的功能。

inferno-split-pane 的实践：水平与垂直布局

现在我们来学习如何在实践中使用 inferno-split-pane，尤其是如何实现水平分割布局和垂直分割布局。

实践分析

我们将使用两个实际案例演示如何使用 inferno-split-pane 实现垂直布局。

  • 实践案例一：

  • 实践案例二：

很清楚看到，实践案例一中，有两个水平区域，中间有一条分割线，通过拖拽分割线可以改变两个区域的大小。

实践案例二，是一个垂直布局，左侧是读取与查询数据的区域，右侧是展示数据的区域。

水平布局实践

优秀的代码不应该是在 创建一个新布局，而是在修改一个已经存在的布局来适应实际的需要。我们先可以尝试修改官方默认案例来实践。

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

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

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

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

在这个例子中，我们修改了默认尺寸并添加了一个调整器。拖拽调整器的时候，区域的大小会跟随实现变化：

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

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

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

以上为该例子使用到的 CSS 样式。

垂直布局实践

接下来，我们看看如何实现垂直布局：

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

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

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

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

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

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

实践上，我们编写了如上代码。这有两个垂直区域。左半部分有一个标题，一个调整栏，右半部分则有一个标题以及一个由文字组成的组件。

在此过程中，我们借助了一些预先定义好的 CSS 样式

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

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

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

怎么样，是不是使用起来非常的方便呢？

总结

inferno-split-pane 是一款非常实用和轻量级的前端开发库，它可以帮助我们在项目开发中更加方便地实现分割布局，提高开发效率。通过本篇文章的介绍，相信大家也学到了 inferno-split-pane 的基本使用方法和在项目实践中的应用。尽管 inferno-split-pane 号称轻量级库，我们还是可以得到非常丰富的功能。希望您在后续的项目开发中可以充分应用它，让我们可以更好地实现应用目标！

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

阅读全文

猜你喜欢

  • npm包 @andriyf/node-odata 的使用教程

    在前端开发中，使用npm包是极为常见的操作，因为它可以方便地集成和维护各种开发工具和库。其中 @andriyf/node-odata 是一个支持 OData v2 和 v4 协议的 Node.js 库...

    2 年前
  • npm 包 @ozylog/graphql-errors 使用教程

    如果你常常使用 GraphQL，你应该知道错误处理是一个很重要的问题。在传统的 RESTful API 中，错误通常通过 HTTP 状态码进行传递，但是 GraphQL 通常只返回原始数据，这为错误处...

    2 年前
  • npm 包 cordova-plugin-tci-sdk 使用教程

    如果您正在开发使用 Apache Cordova 的移动应用程序，您可能会需要使用 tci-sdk，这是一个可以帮助您实现各种通信功能的工具。 在本文中，我们将深入介绍 npm 包 cordova-p...

    2 年前
  • npm 包 rb-meter 使用教程

    介绍 rb-meter是一个npm包，它可以帮助前端开发人员快速生成实时监测DOM节点的大小。rb-meter非常适合于那些需要检测DOM节点的大小或要生成自适应布局的开发人员。

    2 年前
  • npm 包 mongodb_access_interface_set 使用教程

    介绍 mongodb_access_interface_set 是一个 Node.js 的 npm 包，其提供了在 Node.js 中操作 MongoDB 数据库的接口，方便开发人员以更简单快捷的方式...

    2 年前
  • npm 包 web-tree-crawl 使用教程

    简介 web-tree-crawl 是一个 NPM 包，它能够帮助你快速地爬取一个网站的 DOM 树。这个包基于 Node.js 开发，并且提供了一些非常简单易用的功能来获取一个网站的 DOM 树。

    2 年前
  • npm 包 my-simple-button 使用教程

    在前端开发中，经常需要自定义按钮样式，为了方便开发人员，有很多第三方库可以使用。其中，一个非常好用的 npm 包就是 my-simple-button，它可以让你轻松创建和自定义样式的按钮。

    2 年前
  • npm 包 choiros-router 使用教程

    前言 前端开发中经常需要进行路由管理，相信大家都使用过 Vue 或 React 中的路由插件。不过如果想要自己手动实现一个轻量的路由控制器，我们可以使用 npm 包 choiros-router。

    2 年前
  • npm 包 sugo-scope 使用教程

    前言 sugo-scope 是一款 npm 包，它是一种 JavaScript 库，提供从 URL 获取数据的能力。 在这篇文章中，我们将详细介绍如何使用 sugo-scope，并提供示例代码，以便您...

    2 年前
  • npm 包 react-sg 使用教程

    前言 在前端开发中，我们常常需要编写样式表来美化页面。尽管现在有许多前端 UI 框架可以使用，但是还是有许多时间需要编写自定义样式。为了更加高效地编写样式表，我们可以使用一些辅助工具来完成这项工作。

    2 年前
  • NPM 包 ajenti-build 使用教程

    什么是 Ajenti-build Ajenti-build 是一个帮助我们快速构建 Web 应用程序的工具, 可以认为它是基于 Ajenti 仪表盘的构建工具。Ajenti 是一款基于 Python ...

    2 年前
  • npm 包 feathers-services-instagram-feed 使用教程

    简介 feathers-services-instagram-feed 是一个 npm 包，用于快速获取 Instagram 用户的最新帖子和最新的标记。这个 npm 包可以帮助前端开发人员实现 In...

    2 年前
  • npm 包 graphql-mongodb-resolver 使用教程

    前言 graphql-mongodb-resolver 是一个基于 Node.js 平台的 GraphQL 解析器与 MongoDB 数据库操作库。它提供了一套简单易用的 API，帮助开发者构建出基于...

    2 年前
  • npm 包 flub78-nodejs-tutorial 使用教程

    前言 Node.js 是一门基于 JavaScript 的服务端编程语言。它有着非常丰富的模块和库，使得我们可以很方便地编写出高效的服务器端应用程序。其中，npm（Node.js 包管理器）则是 No...

    2 年前
  • npm 包 wikimedia-service-builder 使用教程

    在现代的前端开发中，使用 npm 包已经成为了必不可少的一部分。而其中最为著名、最为强大的 npm 包之一就是 wikimedia-service-builder。

    2 年前
  • npm 包 aslk 使用教程

    引言 npm 是 Node.js 的包管理器，它允许我们轻松地管理和分享代码。而 aslk 是一个前端开发中非常有用的 npm 包，它提供了一些能够提高开发效率的功能。

    2 年前
  • npm 包 generator-weather-react 使用教程

    在前端开发中，使用现成的工具可以提高效率。npm 包是其中一种非常有用的工具，使用它们可以节省大量时间和精力。 本文将介绍一款名为 generator-weather-react 的 npm 包的使用...

    2 年前
  • NPM 包 Relevant-animals 使用教程

    在前端开发中，我们经常需要对数据进行分类或者筛选，而使用有意义的词语来进行分类是非常有助于理解和后续处理的。relevant-animals 就是一个非常有趣且有意义的 NPM 包，它会根据给定的字符...

    2 年前
  • npm 包 webchart-library 使用教程

    Webchart-library 是一款基于 D3.js 开发的数据可视化图表库，可以帮助前端开发者快速构建各种交互性的数据可视化图表。本教程将为大家介绍如何使用 npm 包 webchart-lib...

    2 年前
  • npm 包 h5p.js 使用教程

    什么是 h5p.js H5P 是一个开源的互动内容创作和发布平台，可以创作出各种互动内容（如课程交互，游戏，测试题等），并通过分享链接来实现在线展示。h5p.js 是 H5P 平台的 JavaScri...

    2 年前

相关推荐

    暂无文章