什么是 bulma.styl-timeline
bulma.styl-timeline 是一款针对 Bulma 使用的时间线插件，可以让你更方便地创建各种时间轴和历史记录 UI。
该插件基于 stylus 和 JavaScript 开发，在实现简单的时间轴和历史记录视图的基础上，提供了大量的可自定义属性和方法，可以让你轻松地调整、扩展和定制你的 UI。
bulma.styl-timeline 作为开源工具，现已发布到 npm 包管理器，可以通过简单的几步安装和配置就可以使用。
如何安装 bulma.styl-timeline
bulma.styl-timeline 属于 npm 包，因此我们需要先在项目中安装 npm。
在命令行中输入以下命令即可安装 npm：
npm install -g npm
安装完成后，我们可以在项目根目录下使用以下命令来安装 bulma.styl-timeline：
npm install bulma.styl-timeline
安装完成后，我们可以通过 import 语句来在项目中引入：
import 'bulma.styl-timeline';
如何使用 bulma.styl-timeline
bulma.styl-timeline 可以直接使用 Bulma 样式类或者自定义类来定制你的时间线 UI ，同时也支持各种配置选项和事件绑定，可以让你自由地调整和控制时间轴。
创建基本的时间轴
创建一个基本的时间轴只需要在 HTML 中添加一个空的 div 元素，并在 JavaScript 中调用 bulma.styl-timeline 的构造函数即可：
HTML:
<div class="timeline"></div>
JavaScript:
new bulmaTimeline('.timeline');增加事件内容
在时间轴上显示时间点的内容通常是用户点击时间点后查询数据库然后实时加载数据，这里我们以静态数据为例：
HTML:
<div class="timeline"></div>
JavaScript:
const timeline = new bulmaTimeline('.timeline');
timeline.addItem({
date: '2018-01-01',
title: 'New Year',
content: '<p>Happy new year!</p>'
});使用自定义类和样式
你可以通过添加自定义类和样式来对时间轴进行个性化定制，在 bulma.styl-timeline 中我们提供了多种可自定义的类和样式属性供你选择。
HTML:
<div class="timeline my-timeline"></div>
CSS:
.my-timeline.is-vertical {
height: 500px;
}JavaScript:
-- -------------------- ---- ------- ----- -------- - --- ----------------------------- - ----------- ---- --- ------------------ ----- ------------- ------ ---- ------ -------- --------- --- ----------- ---------- ------------ ---
更多配置选项和事件绑定
bulma.styl-timeline 还提供了多个配置选项和事件绑定：
配置选项
- isVertical: 是否垂直时间轴，默认为 false；
- isInverse: 是否反向时间轴方向，默认为 false；
- isSubtitle: 是否在标题下显示时间戳，默认为 false；
- isButton: 是否在 Item 右侧显示按钮，默认为 false；
- isExpand: 是否默认展开 Item 内容，默认为 false；
- isToggleable: 是否允许切换 Item 内容的展开和合并，默认为 false。
事件绑定
- onItemToggle: 当 Item 内容展开或合并时触发；
- onItemRemove: 当删除一个 Item 时触发。
完整的代码示例
HTML:
<div class="timeline my-timeline"></div>
CSS:
.my-timeline.is-vertical {
height: 500px;
}JavaScript:
-- -------------------- ---- -------
----- -------- - --- ----------------------------- -
----------- -----
---------- -----
----------- -----
--------- -----
--------- ------
------------- -----
------------- ------ ----- -- -
----------------- --------------- -- ------ - -------- - -------------
--
------------- ------ -- -
----------------- --------------- -- -----------
-
---
------------------
----- -------------
------ ---- ------
-------- --------- --- -----------
---------- ------------
---
------------------
----- -------------
------ -------------
-------- ----- -------- ------ --- ------------
---------- ------------
---
------------------
----- -------------
------ ------------- -----
-------- -------- ----------
---------- -----------
---总结
bulma.styl-timeline 是一款非常棒的时间轴插件，可以让你轻松地实现各种时间轴和历史记录 UI，而且还提供了许多可自定义的选项和事件绑定，可以满足你的各种需求。
如果你正在使用 Bulma，并且想要创建一个漂亮、灵活、易用的时间轴 UI，那么 bulma.styl-timeline 绝对是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea181e8991b448dbf6e