hbox 水平盒子

hbox 内部的组件水平排列。

XML 元素

hbox

Java 类

HorizontalLayout

概览

hbox basic

基本用法

在线示例

示例将多个组件排在同一行，并使用 alignItems 沿交叉轴对齐：

<hbox alignItems="CENTER" wrap="true">
    <span text="Span"/>
    <textField placeholder="TextField"/>
    <button text="Button"/>
    <button text="Button"/>
</hbox>

Start, Middle, and End Slots

在线示例

Use the startSlot, middleSlot, and endSlot elements to place components at the corresponding positions within the available width:

<layout>
    <hbox width="100%">
        <startSlot>
            <span text="Span"/>
        </startSlot>
        <middleSlot>
            <textField placeholder="TextField"/>
            <button text="Button"/>
        </middleSlot>
        <endSlot>
            <button text="Button"/>
        </endSlot>
    </hbox>
</layout>

Content Justification

容器对齐模式可以定义内部元素如何在可用的水平空间中排布。支持：

  • START（默认）

    内部元素对齐在左侧（从左到右的地区语言）或右侧（从右到左的地区语言）。

  • CENTER

    内部所有元素放置于布局容器的中间。

  • END

    内部元素对齐在右侧（从左到右的地区语言）或左侧（从右到左的地区语言）。

  • BETWEEN

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后没有额外的空间。

  • AROUND

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后的额外的空间是元素之间空间的一半。

  • EVENLY

    在内部元素之间均匀分配可用空间。在第一个元素之前或最后一个元素之后的额外的空间跟元素之间空间一样。

使用 justifyContent 属性设置布局的内容对齐。

更多用例，请参阅 布局规则。

XML 属性

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

下面是 hbox 的特殊属性：

名称 描述 默认值

boxSizing

设置内部元素的宽高如何计算。支持值：UNDEFINED、CONTENT_BOX、BORDER_BOX。参阅 MDN。

UNDEFINED

expand

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

—

justifyContent

定义浏览器如何在子组件之间分配空间。参阅 内容对齐。

START

margin

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

false

padding

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

false

spacing

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

true

wrap

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

false

事件和处理器

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

名称 描述

ClickEvent

当用户点击布局时触发。

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

AttachEvent - DetachEvent

XML 内部元素

一个 hbox 可以直接包含其他组件或在 startSlot、middleSlot 和 endSlot 元素中包含组件。

参考

Vaadin 文档