直接跳到内容

ContentSwitcher 内容切换器

ContentSwitcher 根据子组件的 id 切换显示哪个子组件,同一时刻只有一个子组件可见。通常与 Tabs 或按钮配合使用,实现手动控制内容区域的显示切换。

底层:Textual ContentSwitcher

基本用法

通过按钮点击切换 ContentSwitcher 中显示的内容面板:

Props

属性类型默认值说明
initialstr | NoneNone初始显示的子组件 id;不传则初始不显示任何子组件

所有参与切换的子组件都需要唯一的 id;没有 id 的子组件会被隐藏并忽略。

v-model

v-model 默认绑定属性:current(当前显示的子组件 ID,类型为 str \| None

通过 v-model 可读取或设置当前显示的子组件 ID:

事件

配合 Tabs 使用

ContentSwitcher 与 Tabs 配合是构建自定义标签页布局的推荐方式,详见 Tabs 文档

编程式切换

通过 ref 获取组件实例后,可直接设置 .current 属性切换内容:

通用属性

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

属性类型说明
idstr组件 CSS ID,可通过 #id 选择器引用
stylestrTCSS 内联样式,多条规则用分号分隔
classstrTCSS 类名,多个类名用空格分隔
border_titlestr边框标题(需组件设置了 border 样式才可见)
border_subtitlestr边框副标题
ContentSwitcher 内容切换器已经加载完毕