vbox 垂直盒子

vbox 内部组件垂直排列。

XML 元素

vbox

Java 类

VerticalLayout

Overview

vbox basic

基本用法

在线示例

示例中将几个组件放在一列：

<vbox>
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</vbox>

XML 属性

通用属性 对所有组件都是一样的配置。

下面是 vbox 的特殊属性：

名称 描述 默认值

boxSizing

设置如何计算元素的总宽度和总高度。可选值为：UNDEFINED、CONTENT_BOX、BORDER_BOX。参阅： MDN 关于 box-sizing。

UNDEFINED

expand

设置为子组件的 ID，为子组件设置 flex-grow: 1，使其能够沿主轴占据剩余空间。

—

justifyContent

定义浏览器如何在内容条目之间和周围分配空间。 相关用例，请参考 布局规则。

START

margin

在布局的四边添加外边距。参阅 MDN 文档 margin。

false

padding

在布局的四边添加内边距。参阅 MDN 文档 padding。

false

spacing

是否在子元素之间添加主题定义的空间。

true

wrap

如果为 true，当垂直空间不足时将组件移入下一列。参阅 Vaadin 文档 换行。

false

事件和处理器

下面是 vbox 的特殊事件和处理器：

名称 描述

ClickEvent

当用户点击布局时触发。

下面是 vbox 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 vbox 可以包含任意组件，并垂直排列。