Vue.py

外观

本页目录

Reacton 组件 ​

PnReacton 组件可以在 Panel 应用程序中渲染 Reacton 组件，无论是在笔记本中还是在部署的服务器上。Reacton 提供了一种以类似 React 的方式编写可重用组件的方法，用于使用 ipywidgets 生态系统（ipywidgets、ipyvolume、bqplot、threejs、leaflet、ipyvuetify 等）构建基于 Python 的 UI。请注意，Reacton 主要是一种编写应用程序的方法。

在笔记本中，这不是必需的，因为 Panel 只是使用常规的笔记本 ipywidget 渲染器。特别是在 JupyterLab 中，以这种方式导入 ipywidgets 扩展可能会干扰 UI 并使 JupyterLab UI 无法使用，因此请谨慎启用扩展。

底层实现为panel.pane.Reacton，参数基本一致，参考文档：https://panel.holoviz.org/reference/panes/Reacton.html

基本用法 ​

panel_vuepy 函数会自动将任何 Reacton 组件转换为可显示的面板，同时保持其所有交互功能：

结合 Reacton 和 Panel 组件 ​

Reacton 可以与 Panel 组件结合使用，但我们需要做两个修改：

  1. Panel 组件必须使用 pn.ipywidget 包装器包装为 ipywidget（这需要 jupyter_bokeh）。
  2. 包装后的 Panel 组件必须添加到 reacton 布局组件中。

在下面的示例中，我们将 reacton.ipywidgets.Button 替换为 PnButton，然后用 pn.ipywidget 和 reacton.ipywidgets.VBox 包装它：

复杂示例 ​

可以在 Reacton 中构建更复杂的应用程序并在 Panel 中显示。以下是 Reacton 文档中的计算器示例。

逻辑 ​

使用 ipyvuetify ​

Reacton 也可以与 ipyvuetify 结合使用，创建更美观的界面：

API ​

属性 ​

属性名说明类型默认值
object被显示的 Reacton 组件对象object None
default_layout包装图表和小部件的布局pn.layout.Panel Row
sizing_mode尺寸调整模式str 'fixed'
width宽度int, str None
height高度int, str None
min_width最小宽度int None
min_height最小高度int None
max_width最大宽度int None
max_height最大高度int None
margin外边距int, tuple 5
css_classesCSS类名列表list []

Events ​

事件名说明类型

Slots ​

插槽名说明
default自定义默认内容

方法 ​

属性名说明类型

src/examples/panel_vuepy/panes/Reacton

在 GitHub 上编辑此页