npm 包 @morsedigital/collapsible_content_vanilla 使用教程

简介

@morsedigital/collapsible_content_vanilla 是一个基于 Vanilla JavaScript 编写的可折叠内容组件。它允许你通过单击控制器来展开和收起内容，该组件可以轻松地被集成到你的现有项目中。

安装

你可以使用 npm 包管理器来安装该组件，执行以下命令：

npm install @morsedigital/collapsible_content_vanilla

组件已经安装完毕后，你可以在你的项目中使用它。在你的 JavaScript 文件中导入它：

import CollapsibleContent from '@morsedigital/collapsible_content_vanilla';

如何使用

以下是使用 @morsedigital/collapsible_content_vanilla 组件的基本步骤：

1. 首先，在 HTML 文件中添加控制器元素和显示内容的容器元素：

   <button class="collapsible-controller">收起/展开</button>
   <div class="collapsible-content">
     <p>展开内容的第一行。</p>
     <p>展开内容的第二行。</p>
   </div>

2. 在你的 JavaScript 文件中创建一个新的 CollapsibleContent 实例，并将控制器和内容容器的选择器传递给它：

   const collapsibleContent = new CollapsibleContent({
     controllerSelector: '.collapsible-controller',
     contentSelector: '.collapsible-content',
   });

3. 现在，你可以在控制器上单击以展开或收起内容。

自定义选项

@morsedigital/collapsible_content_vanilla 组件支持一些自定义选项，你可以在创建实例时传递它们：

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

以下是所有可用选项：

controllerSelector（必选）

控制器的选择器。

contentSelector（必选）

内容容器的选择器。

activeClass

默认值：active

当内容容器展开时为控制器添加的 CSS 类名。

animationDuration

默认值：300

展开和收起动画的持续时间（以毫秒为单位）。

onInit

该函数会在组件初始化时被调用。

onToggle

当内容容器的展开状态更改时调用该函数。

函数接收一个布尔值，该值表示内容容器是否处于展开状态。例如，若容器已展开，则isOpen 为 true。

示例代码

以下是使用 @morsedigital/collapsible_content_vanilla 组件的完整示例代码：

HTML：

<button class="collapsible-controller">收起/展开</button>
<div class="collapsible-content">
  <p>展开内容的第一行。</p>
  <p>展开内容的第二行。</p>
</div>

JavaScript：

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

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

总结

@morsedigital/collapsible_content_vanilla 是一个简单易用的折叠内容组件，适合在前端项目中使用。该组件具有可定制性，并支持许多选项，可帮助你轻松实现你的内容展开和收起需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244765