Vue.py

外观

本页目录

VBox / HBox / Slot 布局容器 ​

VBox、HBox 是 Textual-vuepy 最基础的布局容器，用于将子组件分别沿垂直方向或水平方向排列。Slot 是 VBox 的别名，通常用作 slot 占位容器。

底层：Textual Vertical / Textual Horizontal

基本用法 ​

使用 VBox 垂直排列子组件，使用 HBox 水平排列子组件，两者可以任意嵌套。

vue
<template>
  <VBox style="height: 1fr; padding: 1;">
    <Label label="顶部标签" />
    <HBox style="height: 3;">
      <Button label="左按钮" />
      <Button label="右按钮" />
    </HBox>
    <Label label="底部标签" />
  </VBox>
</template>

Props ​

VBox、HBox 和 Slot 本身不定义额外 Props，所有布局控制均通过通用属性（尤其是 style）完成。

属性类型默认值说明
(无特有属性)——通过通用属性 style 控制尺寸与布局

常用 TCSS 布局样式示例 ​

TCSS 样式说明
height: 1fr占据剩余高度（弹性伸展）
width: 1fr占据剩余宽度（弹性伸展）
height: 5固定高度为 5 行
padding: 1内边距 1 格
margin: 1 2垂直外边距 1 格，水平外边距 2 格
border: solid green实线边框，绿色
background: $surface使用主题背景色
align: center middle内容居中对齐

事件 ​

VBox / HBox / Slot 支持 Textual 标准鼠标与点击事件：

事件说明
@click鼠标点击容器时触发
@mouse_move鼠标在容器内移动时触发
@mouse_enter鼠标进入容器区域时触发
@mouse_leave鼠标离开容器区域时触发
@scroll_up容器内向上滚动时触发
@scroll_down容器内向下滚动时触发

进阶示例 ​

等比分割布局 ​

使用 1fr 将可用空间等分给多个子容器：

vue
<template>
  <HBox style="height: 1fr;">
    <VBox style="width: 1fr; border: solid $accent;">
      <Label label="左侧面板" />
    </VBox>
    <VBox style="width: 2fr; border: solid $primary;">
      <Label label="右侧主内容区（占 2/3）" />
    </VBox>
  </HBox>
</template>

使用 Slot 占位 ​

Slot 与 VBox 完全等价，可用于语义化的 slot 占位：

vue
<template>
  <VBox style="height: 1fr;">
    <Slot style="height: 1fr;">
      <Label label="主内容区" />
    </Slot>
  </VBox>
</template>

通用属性 ​

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

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

在 GitHub 上编辑此页