npm 包 @jupyterlab/statusbar 使用教程

阅读时长 7 分钟读完

简介

@jupyterlab/statusbar 是 JupyterLab 状态栏扩展中的一部分。它提供了一个可配置的状态栏,以在 JupyterLab 应用程序中显示有关文档或应用状态的信息。

使用 @jupyterlab/statusbar,您可以轻松地自定义状态栏并添加自己的项目。默认情况下,它显示文档中的字符数、行数和光标位置。

安装

要使用 npm 包 @jupyterlab/statusbar,请在终端中运行以下命令:

基本用法

为了在 JupyterLab 中使用状态栏,您需要在扩展中导入它:

然后,您需要将状态项目添加到状态栏中。例如,要添加一个标签,可以执行以下操作:

现在,"my label" 将出现在状态栏左侧。

自定义状态项目

要创建自己的状态项目,请实现 IStatusBarItem 接口或将其子类化,并将其添加到状态栏中。

例如,以下代码演示如何创建一个使用数据模型中的值的自定义文本项目:

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

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

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

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

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

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

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

要将这个项目添加到状态栏中,可以执行以下操作:

现在,您会在状态栏中看到一个新的项目,它会显示 "My custom value: 42",其中,42 是数据模型中属性 "myValue" 的值。

示例代码

以下代码演示如何创建一个使用 @jupyterlab/statusbar 的自定义状态栏项目:

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

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

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

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

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

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

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

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

保存上述代码到一个 TypeScript 文件中,例如: datetime.ts

然后,在您的 JupyterLab 应用程序中打开终端窗口,并将其切换到文件所在的文件夹。运行以下命令来构建您的扩展:

最后,将您的扩展装载到 JupyterLab 中:

现在您的自定义状态项目已添加到状态栏中。它会定期更新以显示最新的日期和时间。

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

纠错
反馈