npm 包 @deomitrus/blessed 使用教程

阅读时长 5 分钟读完

介绍

@deomitrus/blessed 是一个用于构建终端界面的 npm 包,它建立在 blessed 基础上,提供了更加现代化的 API 和更好的可扩展性。

该包支持基于 Node.js 的应用程序,可以为您的应用程序提供优秀的控制台用户界面(CUI)交互体验。

安装

@deomitrus/blessed 可以使用 npm 安装:

快速上手

以下是一些关于如何使用 @deomitrus/blessed 的基础示例。

代码示例

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

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

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

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

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

解析

上述代码的行为相当简单。它创建了一个根容器,向其中添加了基础文本框,并将文本框分配给根容器。

要了解样式和布局,请参阅创建和定位元素以详细了解各种组件的概述。

创建和定位元素

@deomitrus/blessed 提供了很多组件,您可以从中选择)。

要创建组件,您首先需要实例化一个组件本身。组件可用于存储和管理属于它们的状态,并响应各种事件。通过将组件与其他组件连接起来,您可以构建一个完整的用户界面。

组件有许多不同的属性(例如,边框或填充)。您应该掌握这些属性,以便了解如何更好地控制组件。

核心布局组件

以下是 Blessed 布局组件的简要概述:

  • Element / Box - 文本输出框
  • Form - 用于嵌入字段、选项卡等的基本组件
  • Input - 单行文本编辑器
  • List -可垂直滚动的选项列表
  • Log - 内容显示器,支持添加/滚动
  • Message - 纯文本输出,支持滚动
  • ProgressBar - 基本进度条
  • Question - 纯文本输入和输出
  • RadioSet - 一组互斥的选项按钮集合
  • Screen - 应用程序的根容器
  • Table - 可滚动表格,支持自定义列大小、可命名列以及排序
  • Text - 支持包含链接、任务等的 UI 文本

核心组件属性

以下是一些 Blessed 组件属性的简要概述:

  • border - 边框控制选项
  • type - 边框类型
  • bg - 背景颜色
  • fg - 前景颜色
  • focus - 是否聚焦 show
  • hidden - 是否隐藏
  • label - 简短的说明文字

监听事件

在 @deomitrus/blessed 中,您可以使用 .on(eventName, handler) 方法将事件监听器添加到组件中。例如,这是一个按钮的监听器函数:

在键盘事件处理中保持聚焦

在默认情况下 @deomitrus/blessed 的组件不会聚焦,必须通过 focus() 方法激活。

要在键盘事件处理中保持聚焦,您可以使用事件对象上的 target.focus()

例如,以下代码块用户处理 key 事件,聚焦 id 为 some-input 的输入组件:

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

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

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

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

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

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

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

总结

@deomitrus/blessed 提供了一种创建强大命令行界面的方法。它易于使用,且具有广泛的 API 和解决方案。

只需安装该 npm 包,即可从开始开发您的命令行界面。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3eb

纠错
反馈