简介
@jupyterlab/statusbar 是 JupyterLab 状态栏扩展中的一部分。它提供了一个可配置的状态栏，以在 JupyterLab 应用程序中显示有关文档或应用状态的信息。
使用 @jupyterlab/statusbar，您可以轻松地自定义状态栏并添加自己的项目。默认情况下，它显示文档中的字符数、行数和光标位置。
安装
要使用 npm 包 @jupyterlab/statusbar，请在终端中运行以下命令：
npm install @jupyterlab/statusbar
基本用法
为了在 JupyterLab 中使用状态栏，您需要在扩展中导入它：
import {
IStatusBar,
IStatusBarItem,
TextItem
} from '@jupyterlab/statusbar';
然后，您需要将状态项目添加到状态栏中。例如，要添加一个标签，可以执行以下操作：
let label: IStatusBarItem = new TextItem({ text: 'my label' });
statusBar.registerStatusItem('mylabel', {
align: 'left',
item: label
});现在，"my label" 将出现在状态栏左侧。
自定义状态项目
要创建自己的状态项目，请实现 IStatusBarItem 接口或将其子类化，并将其添加到状态栏中。
例如，以下代码演示如何创建一个使用数据模型中的值的自定义文本项目：
-- -------------------- ---- -------
------ - --------------- -------- - ---- ------------------------
----- ---------- ---------- -------------- -
-------------------- -------------------- -
----------- - --------------
---------- - --- ---------- ----- --------------- ---
------------------------------------------------ ------
-
--- ------- -------------- -
------ -----------
-
------- ----------------- ---- -
------------------------------------
-
------- ----------- ------ -
------ --- ------ ------ ------------------------
-
------- ------- --------
------- ------ ---------
-
--------- ---------- -
------ --------- -------- -
------ --------
-
-
要将这个项目添加到状态栏中，可以执行以下操作：
let myModel = new MyModel();
let myItem = new MyTextItem({model: myModel});
statusBar.registerStatusItem('myitem', {
align: 'left',
item: myItem.item
});现在，您会在状态栏中看到一个新的项目，它会显示 "My custom value: 42"，其中，42 是数据模型中属性 "myValue" 的值。
示例代码
以下代码演示如何创建一个使用 @jupyterlab/statusbar 的自定义状态栏项目：
-- -------------------- ---- -------
------ - ----------- --------------- -------- - ---- ------------------------
-- ------ -------------- ---------------------
----- ------------ ---------- -------------- -
-- ------- -------- --
------------- -
---------- - --- ---------- ----- --------------- ---
-------------- -- -
------------------------------------
-- ------
-
-- -- -------- --
--- ------- -------------- -
------ -----------
-
-- ---------
------- ----------- ------ -
----- ---- - --- -------
----- ---- - ----------------------------------------- -----
----- ----- - ---------------- - ------------------------- -----
----- --- - ------------------------------------- -----
----- ----- - -------------------------------------- -----
----- ------- - ---------------------------------------- -----
----- ------- - ---------------------------------------- -----
------ ------------------------ --------------------------------
-
------- ------ ---------
-
-- -- ---------- ----------
------ - ---------------- --------------------- - ---- --------------------------
----- ---------- --------------------------- - -
--- ---------------------------------------
---------- -----
--------- -------------
--------- ----- ---------------- ---------- ----------- -- -
-- -- ------------ ----------
----- ------------ - --- ---------------
--------------------------------------------- -
----- ------------------
----- --
------ -------
---
-
--
------ ------- ----------
保存上述代码到一个 TypeScript 文件中，例如： datetime.ts。
然后，在您的 JupyterLab 应用程序中打开终端窗口，并将其切换到文件所在的文件夹。运行以下命令来构建您的扩展：
npm install npm run build
最后，将您的扩展装载到 JupyterLab 中：
jupyter labextension install . jupyter lab --watch
现在您的自定义状态项目已添加到状态栏中。它会定期更新以显示最新的日期和时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1f94b5403f2923b035c609