ContentSwitcher 内容切换器
ContentSwitcher 根据子组件的 id 切换显示哪个子组件,同一时刻只有一个子组件可见。通常与 Tabs 或按钮配合使用,实现手动控制内容区域的显示切换。
基本用法
通过按钮点击切换 ContentSwitcher 中显示的内容面板:
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
initial | str | None | None | 初始显示的子组件 id;不传则初始不显示任何子组件 |
所有参与切换的子组件都需要唯一的 id;没有 id 的子组件会被隐藏并忽略。
v-model
v-model 默认绑定属性:current(当前显示的子组件 ID,类型为 str \| None)
通过 v-model 可读取或设置当前显示的子组件 ID:
事件
无
配合 Tabs 使用
ContentSwitcher 与 Tabs 配合是构建自定义标签页布局的推荐方式,详见 Tabs 文档。
编程式切换
通过 ref 获取组件实例后,可直接设置 .current 属性切换内容:
通用属性
所有 Textual-vuepy 组件均支持以下属性:
| 属性 | 类型 | 说明 |
|---|---|---|
id | str | 组件 CSS ID,可通过 #id 选择器引用 |
style | str | TCSS 内联样式,多条规则用分号分隔 |
class | str | TCSS 类名,多个类名用空格分隔 |
border_title | str | 边框标题(需组件设置了 border 样式才可见) |
border_subtitle | str | 边框副标题 |