vbox 垂直盒子

在线示例

vbox 所有内部组件在一列垂直排列。

XML 元素

vbox

Java 类

VerticalLayout

XML 属性

通用： id - enabled - visible

尺寸： boxSizing - height - maxHeight - maxWidth - minHeight - minWidth - width

位置： alignItems - alignSelf - colspan - expand - justifyContent - spacing

外观： classNames - css - margin - padding - themeNames - wrap

其他： clickShortcut

事件和处理器

AttachEvent - ClickEvent - DetachEvent

基本用法

将三个组件放在一列的示例：

<vbox id="vbox" >
    <textField placeholder="TextField"/>
    <button text="OK"/>
    <button text="Cancel"/>
</vbox>
vbox basic

XML 属性

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

下面是 vbox 的特殊属性：

名称

描述

默认值

boxSizing

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

-

expand

设置在布局中需要延展以使用剩余空间的组件。对于 hbox，此属性将组件的宽度设置为 100%。

-

justifyContent

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

START

margin

定义外边框与容器内容之间的缩进。可选值：true、false。参阅： MDN 关于 margin。

false

padding

同时设置元素四个边的内边距区域。可选值：true、false。参阅： MDN 关于 padding。

false

spacing

设置布局内组件之间的间距。可选值：true、false。

false

wrap

如果为 true，则在空间不足时允许组件换行到新行。参见 Vaadin 文档中的 Wrapping。

false

事件和处理器

AttachEvent - ClickEvent - DetachEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

ClickEvent

当用户点击布局时发送 com.vaadin.flow.component.ClickEvent 事件。