3

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

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

4

2 回答 2

3

如果您使用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");
于 2019-01-29T09:36:27.227 回答
3

要设置单个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>

Gotcha(对我来说):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.htmlhttps://stackoverflow.com/a/57553974/868941

于 2019-01-29T20:33:56.053 回答