vbox 垂直盒子

在线示例

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

  • XML 元素：vbox

  • Java 类：VerticalLayout

基本用法

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

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

XML 属性

id - alignItems - alignSelf - boxSizing - classNames - colspan - css - enabled - expand - height - justifyContent - margin - maxHeight - maxWidth - minHeight - minWidth - padding - spacing - visible - width

boxSizing

MDN

设置元素的总宽度和高度如何计算。支持：

  • UNDEFINED

  • CONTENT_BOX

  • BORDER_BOX

expand

设置布局中的某个组件需要延展以使用所有的可用空间。在 vbox 中，该属性设置组件的高度为 100%。

justifyContent

MDN

定义浏览器如何分配内部组件之间的空隙。支持：

  • START

  • END

  • CENTER

  • BETWEEN

  • AROUND

  • EVENLY

margin

MDN

定义 margin，即外部边界到容器内容之间的空隙。可以是 true 或 false。默认值为 false。

padding

MDN

定义组件的所有四边 padding。可以是 true 或 false。默认值为 false。

spacing

定义布局内组件之间的空隙。可以是 true 或 false。默认值为 false。

事件和处理器

AttachEvent - ClickEvent - DetachEvent

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

ClickEvent

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