vaadin-flow - 如何在 Vaadin Flow 中设置 FormLayout 的标签宽度？

Question

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

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

Answer 1

用于设置个人 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 .