介绍
@deomitrus/blessed 是一个用于构建终端界面的 npm 包,它建立在 blessed 基础上,提供了更加现代化的 API 和更好的可扩展性。
该包支持基于 Node.js 的应用程序,可以为您的应用程序提供优秀的控制台用户界面(CUI)交互体验。
安装
@deomitrus/blessed 可以使用 npm 安装:
npm install --save @deomitrus/blessed
快速上手
以下是一些关于如何使用 @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)
方法将事件监听器添加到组件中。例如,这是一个按钮的监听器函数:
button.on("press", function() { // do something... });
在键盘事件处理中保持聚焦
在默认情况下 @deomitrus/blessed 的组件不会聚焦,必须通过 focus()
方法激活。
要在键盘事件处理中保持聚焦,您可以使用事件对象上的 target.focus()
。
例如,以下代码块用户处理 key 事件,聚焦 id 为 some-input 的输入组件:
-- -------------------- ---- ------- ---------------- ------- ------------ ---- - ------ ---------------- --- --------------------- ------------ ---- - -- --------- --- -------- - ---------------- - -- --------- --- ------ - ------------------- - -- --------- --- -------- - ----------------------- - -- --------------- -- ------------------- --- ----------- - ------- - ---------------- --- -------------------------------
总结
@deomitrus/blessed 提供了一种创建强大命令行界面的方法。它易于使用,且具有广泛的 API 和解决方案。
只需安装该 npm 包,即可从开始开发您的命令行界面。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055cb881e8991b448da3eb