Vue.py

外观

本页目录

TabbedContent / TabPane 标签页容器 ​

TabbedContent 是一个内置标签导航栏的容器组件，配合 TabPane 子组件可快速构建多标签页界面。用户点击不同标签即可切换显示对应的内容区域。

底层：Textual TabbedContent

基本用法 ​

vue
<template>
  <TabbedContent>
    <TabPane title="首页" id="tab-home">
      <Label label="欢迎来到首页" />
    </TabPane>
    <TabPane title="设置" id="tab-settings">
      <Input placeholder="设置项" />
    </TabPane>
    <TabPane title="关于" id="tab-about">
      <Label label="版本 1.0.0" />
    </TabPane>
  </TabbedContent>
</template>

Props ​

TabbedContent Props ​

属性类型默认值说明
initialstr""初始激活的 TabPane 的 id；留空则激活第一个 TabPane

TabPane Props ​

属性类型默认值说明
titlestr必填标签页标题，显示在标签导航栏上
idstr自动生成标签页唯一标识，用于 initial 属性或编程式切换

v-model ​

  • TabbedContent v-model 默认绑定属性：tabs（当前激活标签的 ID）
  • TabPane v-model 默认绑定属性：label（标签文字）

通过 v-model 可以读取或控制当前激活的标签：

vue
<template>
  <VBox style="height: 1fr;">
    <Label :label="`当前标签：${active_tab.value}`" />
    <TabbedContent v-model="active_tab.value">
      <TabPane title="A 页" id="pane-a">
        <Label label="A 页内容" />
      </TabPane>
      <TabPane title="B 页" id="pane-b">
        <Label label="B 页内容" />
      </TabPane>
    </TabbedContent>
  </VBox>
</template>

<script lang="py">
from vuepy import ref

active_tab = ref("pane-a")
</script>

事件 ​

事件参数说明
@tabbed_content_tab_activatedTabbedContent.TabActivated用户切换到新标签时触发；event.tab 为被激活的 Tab 对象

事件使用示例 ​

vue
<template>
  <TabbedContent
    initial="tab-home"
    @tabbed_content_tab_activated="on_tab_change"
  >
    <TabPane title="首页" id="tab-home">
      <Label label="首页内容" />
    </TabPane>
    <TabPane title="日志" id="tab-log">
      <Label label="日志内容" />
    </TabPane>
  </TabbedContent>
</template>

<script lang="py">
def on_tab_change(event):
    tab_id = str(event.tab.id)
    print(f"切换到标签：{tab_id}")
</script>

进阶示例 ​

动态标签内容 ​

结合响应式数据动态渲染标签页内容：

vue
<template>
  <TabbedContent initial="tab-users">
    <TabPane title="用户列表" id="tab-users">
      <DataTable :data="users.value" />
    </TabPane>
    <TabPane title="统计" id="tab-stats">
      <Label :label="`共 ${users.value|length} 位用户`" />
    </TabPane>
  </TabbedContent>
</template>

<script lang="py">
from vuepy import ref

users = ref([
    {"name": "Alice", "role": "admin"},
    {"name": "Bob",   "role": "user"},
])
</script>

通用属性 ​

所有 Textual-vuepy 组件均支持以下属性：

属性类型说明
idstr组件 CSS ID，可通过 #id 选择器引用
stylestrTCSS 内联样式，多条规则用分号分隔
classstrTCSS 类名，多个类名用空格分隔
border_titlestr边框标题（需组件设置了 border 样式才可见）
border_subtitlestr边框副标题

在 GitHub 上编辑此页