Ctrl+K

用户界面

用户界面#

Thebe支持一些内置的用户界面元素。

目的是提供简单的元素，可以添加到页面上，并由消费者相应地进行样式设置，无需重新编写代码。按照此处所示的方式使用这些UI元素，假设您已经在页面上静态加载了Thebe。

内置的UI元素包括：

  • 激活按钮

  • 内核状态小部件

激活按钮#

当按下此按钮时，它将在页面上运行thebelab.bootstrap函数。按如下方式配置此UI元素。

在页面所需位置添加一个div元素。

<div class="thebe-activate" />

然后在Thebe配置对象中设置以下选项mountActivateWidget:true

状态小部件#

此元素将显示内核的状态，当内核发送新消息或执行代码时会更新。按如下方式配置此UI元素。

在页面所需位置添加一个div元素。

<div class="thebe-status" />

然后在Thebe配置对象中设置以下选项mountStatusWidget:true

示例#

将以下内容添加到页面将呈现激活和状态小部件。

<script type="text/x-thebe-config">
  {
    requestKernel: true,
    binderOptions: {
      repo: "binder-examples/requirements",
    },
    mountActivateWidget: true,
    mountStatusWidget: true
  }
</script>
<div class="thebe-activate" />
<div class="thebe-status" />
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>

按下激活将把以下代码转换为激活单元格，内核状态小部件将显示内核启动的状态。

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
x = np.linspace(0,10)
plt.plot(x, np.sin(x))
plt.plot(x, np.cos(x))

[<matplotlib.lines.Line2D at 0x7f99c4b35430>]
../../../../_images/52f15dacc7972ded129131dbf1ddfea0e53dc559669efbe7d6aaa06299776df0.png

注意：如果您希望动态加载Thebe，请查看此处示例中的自定义启动按钮。

目录