GroupBoxLayout 分组框

在线示例

GroupBoxLayout - 分组框布局 是一个容器，可以将一些组件框在一个区域并设置一个整体的标题。另外，这个区域还支持折叠。

group box default

组件的 XML 名称：groupBox。

基本用法

示例：

<groupBox caption="Vertical GroupBox"
          spacing="true"
          width="AUTO">
    <label value="Label"/>
    <textField inputPrompt="TextField"/>
    <button caption="Button"/>
    <button caption="Button"/>
</groupBox>

默认情况下，groupBox 容器的宽度是 100%，与 vbox 类似。

属性

  • caption - 定义组标题。

  • orientation - 定义组件放置的方向 - 水平或垂直。默认值为 vertical（垂直）。水平摆放如下所示：

    group box horizontal

  • collapsable - 如果该值设置为 true，可以使用左上角的按钮将组件的内容隐藏。

    group box collapsable

  • collapsed - 如果设置为 true，初始状态下组件内容会被折叠。collapsed 属性在 collapsable="true" 有效。

  • showAsPanel - 如果设置为 true，该组件看起来就会像 Vaadin Panel。默认值为 false。

    group box panel

  • outerMargin - 设置 groupBox 边框的外边距。如果设置为 true，组件的所有边都会添加外边距。要单独设置每一边的外边距，请为 groupBox 的每一边设置 true 或 false：

    <groupBox outerMargin="true, false, true, false"/>

XML 属性

align - box.expandRatio - caption - captionAsHtml - collapsable - collapsed - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - expand - height - htmlSanitizerEnabled - icon - id - orientation - outerMargin requiredIndicatorVisible - responsive - rowspan - showAsPanel - spacing - visible - width