Vaadin中按钮的多行标题不起作用

问题描述

我正在使用Vaadin，我想在具有多行的按钮上添加标题-它应该只显示String - 2 linebreaks - String，我并不认为这样做很难。

现在，可惜这比我预期的要难一点-我的DataStructure应该显示一个时间表（因此我正在使用扩展网格的结构），并且我希望所有Slot都填充相应的演讲和讲师。但是，我必须使用Button元素（而不是NativeButton），因此使用HTML Caption无效。

所以我尝试的是这样的CSS类：

.multiline-button {
    width: 125px;
    white-space: normal !important;
    height: auto;
    word-break: break-word !important;
    word-wrap: break-word !important;
    background-color: red !important;
}

（实际上，背景颜色仅用于测试是否应用了样式）-我还尝试通过button.setStyle(name,value);在代码中手动设置这些属性。遗憾的是，这些结果都没有被应用到按钮上。我的按钮创建代码：

@CssImport("./styles/multiline-button.css")
public class NewScheduleTiMetable<T> extends TiMetableWithValue<T> {

    @Override
    protected Button createSlot(int day,int timeSlot) {
        final Button slotButton = new Button();
       /* even desperately tried removing all other themes,didn't even change anything 
        slotButton.getThemeNames().forEach(theme -> {
            slotButton.removeThemeName(theme);
        }); */
        slotButton.setWidthFull();
        slotButton.setHeight("125px");
        slotButton.addClassName("multiline-button");

        //this sets the text
        if (hasValue(day,timeSlot)) {
            slotButton.setText(getText(getValue(day,timeSlot)));
        }
        this.recalculateColumnWidths();
        return slotButton;
    }

}

现在，按钮已成功创建，并显示了它们应具有的名称-它们只是缺少字幕的换行符。如果我在浏览器中检查了元素，则字幕中确实包含换行符（换行符是通过\n完成的。）

所以我对Vaadin来说还很陌生，但是通常这些事情只有五分钟的时间，我不需要花几天的时间就可以找到不同的方法（所有方法都无法令人满意）-我在这里错过了什么？

解决方法

您可以做的是将一些HTML内容设置为图标组件，尽管该按钮似乎并非为此设计的。

Button button = new Button(new Html("<div>Line 1<br /><br />Line 2</div>"));

请注意，HTML内容必须包含在一个元素中，例如上面的div。

这还会添加您可能想用icon删除的button.getThemeNames().remove("icon");主题。

如果您将CSS更改为例如

，则不必这样做。

height: auto;
padding: var(--lumo-space-s);

它应该使您走得很远。

java java multiline vaadin