如何用图标输出标签？

问题描述：

当我使用setIcon()时，标签的文本跳到下一行。如何在一行中输出它？如何用图标输出标签？

Label info = new Label("Reports are generated every day at 5 pm", ContentMode.HTML); 
info.setIcon(new ThemeResource("img/icons/information.png")) ; 
info.setSizeUndefined(); 
JobsLayout.addComponent(info); 
JobsLayout.setComponentAlignment(info, Alignment.MIDDLE_RIGHT);

答

您可以使用图标标签文本中：

Label date = new Label(FontAwesome.CALENDAR.getHtml() + " " + new Date()); 
date.setContentMode(ContentMode.HTML);

来源：Vaadin Wiki。

结果：

这是不可能的自定义图标，这个问题是关于使用themeresource – 2018-02-13 09:24:30

答

你应该试试这个：

info.addStyleName("line");

这个CSS：

.v-caption-line { 
    display: inline !important; 
}

答

这可能是标签，以及，你可以尝试一些内联CSS，因为你指定你的内容键入到HTML无论如何，它应该是这样的： Label info = new Label("<span style=\"dispaly: inline;\">Reports are generated every day at 5 pm</span>", ContentMode.HTML);

如果这样做没有成功，请尝试使用与标签关联的div做同样的事情 - 或者 - 您可以在跨度内将内联CSS插入图标。

答

我有同样的问题，用下面的 “解决方案” 结尾。优点是，如果您在下方使用多个标签，则它们在图标和文本之间具有相同的空间。

Vaadin代码

Button label = new Button("Your label text here."); 
label.setIcon(FontAwesome.USER); 
label.addStyleName(ValoTheme.BUTTON_BORDERLESS + " labelButton");

CSS代码

.labelButton:after, .labelButton:active { 
    content: none; 
    border: none; 
    color: #000000; 
} 

.labelButton { 
    cursor: default; 
}

如何用图标输出标签？

相关推荐