GoldenLayout(ipygoldenlayout)：如何以编程方式更改选项卡？答案

【问题标题】：GoldenLayout(ipygoldenlayout): How to programmatically change Tabs?GoldenLayout(ipygoldenlayout)：如何以编程方式更改选项卡？
【发布时间】：2023-03-21 07:11:01
【问题描述】：

我正在尝试找到一种以编程方式更改 ipyGoldenLayout 中的选项卡的方法。有什么办法我可以做到吗？

import ipyvuetify as v
from traitlets import Unicode
from ipygoldenlayout import GoldenLayout

gl = GoldenLayout()

class TestGL(v.VuetifyTemplate):
    template = Unicode("""
    <golden-layout style="height: 200px">
      <gl-row>
        <gl-component title="component1">
          <h1>Component 1</h1>
        </gl-component>
        <gl-stack>
          <gl-component title="component2">
            <h1>Component 2</h1>
          </gl-component>
          <gl-component title="component3">
            <h1>Component 3</h1>
          </gl-component>
        </gl-stack>
      </gl-row>
    </golden-layout>
    """).tag(sync=True)

【问题讨论】：

标签： python jupyter-lab ipywidgets golden-layout ipyvuetify

【解决方案1】：

我已经想通了，这就是答案。

import ipyvuetify as v
from traitlets import Unicode
from ipygoldenlayout import GoldenLayout

gl = GoldenLayout()
class TestGL(v.VuetifyTemplate):
    tabs = Any("1").tag(sync=True)
    template = Unicode("""
    <golden-layout style="height: 200px">
      <gl-row>
        <gl-component title="component1">
          <h1>Component 1</h1>
        </gl-component>
        <gl-stack v-model="tabs">
          <gl-component title="component2" tab-id="1">
            <h1>Component 2</h1>
          </gl-component>
          <gl-component title="component3" tab-id="2">
            <h1>Component 3</h1>
          </gl-component>
        </gl-stack>
      </gl-row>
    </golden-layout>
    """).tag(sync=True)

obj = TestGL()

我可以调用 obj.tabs = "2" 以编程方式切换到带有组件 3 的选项卡。

【讨论】：