如何在Vaadin Flow中设置FormLayout的标签宽度

Question

使用 Vaadin 12 和输入字段左侧的FormLayout和标签。

我想设置标签列的宽度。如何使用Java API实现这一点？

Answer 1

如果您

使用FormItem.addToLabel(..)方法来设置标签内容，则其宽度在 FormItem 中由自定义属性控制 --vaadin-form-item-label-width （请参阅更多： https://vaadin.com/components/vaadin-form-layout/html-api/elements/Vaadin.FormItemElement） 默认值为 8em。因此，您可以设置更宽，例如：

formItem.getElement().getStyle().set("--vaadin-form-item-label-width", "10em");

您无法直接创建FormItem实例，但在将组件添加到FormLayout时会返回该实例：

FormItem formItem = formlayout.addFormItem(component, "label text");

Answer 2

有关设置单个FormItem标签宽度和/或更动态的方法，请参阅答案@TatuLund及其对此解决方案的评论。

要在整个Form中设置标签，请使用@HtmlImport("frontend://styles/shared-styles.html")

并在shared-styles.html中添加此片段：

<dom-module theme-for="vaadin-form-item" id="custom-form-item">
    <template>
        <style>     
            :host {
                --vaadin-form-item-label-width: 15em;  
            }
        </style>
    </template>
</dom-module>

陷阱（对我来说）：theme-for="vaadin-form-item"而不是theme-for="vaadin-form-layout"

---

Vaadin Flow v14+ 的更新（使用 v14.1.3 测试）

使用内容创建form-item.css PROJECT_DIR/frontend/styles/：

   :host {
        --vaadin-form-item-label-width: 15em;
    }

在顶级路由类中添加注释（在我的例子中为主布局类）：

@CssImport(value = "./styles/form-item.css", themeFor = "vaadin-form-item")

另请参阅 https://vaadin.com/docs/v14/flow/theme/migrate-p2-to-p3.html 和 https://stackoverflow.com/a/57553974/868941。