前言
JupyterLab 是一个基于 Web 的交互性编程环境，该环境旨在增强 Jupyter 笔记本的互动性和可扩展性。与 Jupyter 笔记本仅仅只能支持 Python 或者 R 不同，JupyterLab 可以与其他语言的内核交互，如 Julia、JS、Scala 等。
在 JupyterLab 中，@jupyterlab/ui-components 包提供了一组基本的 UI 控件，可以在 JupyterLab 内部或外部使用，如在自己的 Web 应用程序中集成 JupyterLab UI 控件。
本文将介绍如何使用 @jupyterlab/ui-components 包，包括安装、导入、使用案例以及细节问题。读者将会从中获得使用 JupyterLab UI 控件的实际技能和解决问题的方法。
安装
安装 @jupyterlab/ui-components 通过 npm：
$ npm install @jupyterlab/ui-components
导入
在你的 JS 文件中，你可以通过以下代码导入 JupyterLab UI 控件的组件：
-- -------------------- ---- ------- ------ - --------- ---------- ------ ----------- ------------- ------- --------- ------ ------- --------- ------------- --------- ------------ ---------------- - ---- ----------------------------
导入的具体组件如下：
- BoxPanel：显示子组件的套裹面板，横向或纵向摆放；
- DockPanel：将面板排列成可重组合的布局；
- Panel：一个基本的包含内容但不能直接布局的面板；
- SplitPanel：垂直或水平分离的面板，可以通过拖动分离线来改变面板大小；
- StackedPanel：多页面板，使用 TabPanel 可以对其进行管理；
- TabBar：标签，可以被放置在 TabPanel 内，表示这个标签的内容；
- TabPanel：管理多个子面板，使用 TabBar 来控制；
- Title：一个标题化组件，包含图标、标题和标题的文本；
- Widget：创建可自行管理的对象，拥有 DOM 元素和事件处理器；
- addClass：将类添加到 DOM 元素中；
- defineSignal：定义与特定 DOM 元素关联的事件信号；
- getClass：将类添加到 DOM 元素中；
- removeClass：从 DOM 元素中移除类；
- showErrorMessage：在面板中展示错误信息。
使用案例
下面我们结合案例来介绍如何使用 JupyterLab UI 控件。
在你的 HTML 文件中添加以下的标签：
<div id="jupyterlab-ui-example"></div>
在你的 JS 文件中，你可以通过以下代码，创建一个 DockPanel：
import { DockPanel } from "@jupyterlab/ui-components";
let dockPanel = new DockPanel();
dockPanel.id = "myDockPanel";
dockPanel.spacing = 8; // 面板间的间距
document.getElementById("jupyterlab-ui-example").appendChild(dockPanel.node);然后，你就可以通过 addWidget 方法，向 DockPanel 中添加新的子面板：
-- -------------------- ---- ------- ------ - ----- - ---- ---------------------------- --- ----- - --- -------- -------- - ---------- ----------------- - --- ------- -------------------- - ----- --------------------------- -------------------- - --- ----- ------ -- ------- ---- --
你可以通过上述的代码，向 DockPanel 中添加一个可以关闭的子面板，并且在子面板内部添加一段 HTML 内容。
除了 DockPanel，你也可以使用其他类型的面板来布局，在这里不再一一介绍。
细节问题
HTML 全局的 class
@jupyterlab/ui-components 使用了一些全局的 CSS 类，用于控制样式。如果你需要自定义你的各个面板的样式，你可以参考这些全局的 class 来进行样式Override。这些全局 class 的名字如下：
- jp-DockWrapper
- jp-DockPanel
- jp-SplitPanel
- jp-StackedPanel
- jp-BoxPanel
- jp-DockPanel-selected
- jp-mod-hidden
- jp-mod-maximized
- jp-TabBar
- jp-TabPanel
- jp-TabBar-tab
- jp-TabBar-current
- jp-TabBar-content
- jp-VerticalSplitPanel
- jp-HorizontalSplitPanel
字体图标
@jupyterlab/ui-components 默认指定了一个 font-size，也就是 13px，但是这样子默认的字体图标大小变得非常的小。所以你需要去修改你的 CSS 样式，将相应元素的 font-size 手动设成一个合理的数值，例如：
.jupyterlab-tab > * {
font-size: 16px;
}文件路径
在 JupyterLab 的源代码中，所有的文件都引用了打包好的构建文件，例如：
<script type="text/javascript" src="static/build/index.js"></script>
如果你也想直接使用打包好的构建文件，你可以在你的 HTML 文件中使用以下的地址：
<script type="text/javascript" src="./node_modules/@jupyterlab/ui-components/dist/index.min.js"></script>
然后就可以愉快地在你的 JS 文件中使用 JupyterLab UI 控件啦！
总结
通过本文，我们学习了如何使用 @jupyterlab/ui-components 包，并且介绍了面板的类型、面板的自定义、全局 CSS 类的注意事项以及字体图标的使用。
希望能够帮助读者快速上手 JupyterLab UI 控件，实现自己的交互性 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1f94b5403f2923b035c60a