Fatal编程技术网
  • vaadin/
  • 如何更改Vaadin标签文本颜色？

如何更改Vaadin标签文本颜色？

vaadin

如何更改Vaadin标签文本颜色？,vaadin,Vaadin,我正在尝试更改Vaadin项目中标签文本的文本颜色。我很难理解主题是如何工作的。我知道有几种方法可以做到这一点，但我没有运气。我尝试在css文件中创建一个新样式，并使用“setStyleName”添加样式，但颜色没有得到应用。我试过很多方法，但似乎都没能奏效。在Firebug中，我可以禁用下面写着“颜色：#141414；”的地方，网页上的文本会变成白色 当我看到Firebug其中一个标签元素时，我看到： .evoltweb .v-verticallayout > .v-slot:first

我正在尝试更改Vaadin项目中标签文本的文本颜色。我很难理解主题是如何工作的。我知道有几种方法可以做到这一点，但我没有运气。我尝试在css文件中创建一个新样式，并使用“setStyleName”添加样式，但颜色没有得到应用。我试过很多方法，但似乎都没能奏效。在Firebug中，我可以禁用下面写着“颜色：#141414；”的地方，网页上的文本会变成白色

当我看到Firebug其中一个标签元素时，我看到：

.evoltweb .v-verticallayout > .v-slot:first-child h1, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h1, .evoltweb .v-verticallayout > .v-slot:first-child h2, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h2, .evoltweb .v-verticallayout > .v-slot:first-child h3, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h3, .evoltweb .v-verticallayout > .v-slot:first-child h4, .evoltweb .v-verticallayout > .v-slot:first-child .v-label-h4, .evoltweb .v-verticallayout > div > .v-slot:first-child h1, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h1, .evoltweb .v-verticallayout > div > .v-slot:first-child h2, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h2, .evoltweb .v-verticallayout > div > .v-slot:first-child h3, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h3, .evoltweb .v-verticallayout > div > .v-slot:first-child h4, .evoltweb .v-verticallayout > div > .v-slot:first-child .v-label-h4 {
margin-top: 16px;
}

.evoltweb h2, .evoltweb .v-label-h2 {
font-size: 1.6em;
letter-spacing: -0.02em;
margin-bottom: 0.77em;
margin-top: 1.6em;
}

.evoltweb h1, .evoltweb .v-label-h1, .evoltweb h2, .evoltweb .v-label-h2, .evoltweb h3, .evoltweb .v-label-h3 {
color: #141414;
font-weight: 200;
line-height: 1.1;
}

h2, *:-moz-any(article, aside, nav, section) h1 {
display: block;
font-size: 1.5em;
font-weight: bold;
margin-block-end: 0.83em;
margin-block-start: 0.83em;
}

address, article, aside, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, legend, li, listing, main, marquee, menu, nav, noframes, ol, p, plaintext, pre, section, summary, table, tbody, td, tfoot, th, thead, tr, ul, xmp {
unicode-bidi: -moz-isolate;
}
继承自div.v-label.v-widget.v-has-width

这是Firebug标签的HTML：

<html>
<head>
<body class="v-generated-body v-ff v-ff47 v-ff470 v-gecko v-win" scroll="auto">
<div id="EVOLtWeb-1346167182" class="v-app evoltweb evoltwebui">
<div class="v-ui v-scrollable" tabindex="1" style="width: 100%; height: 100%;">
<div class="v-loading-indicator third v-loading-indicator-wait" style="position: absolute; display: none;"></div>
<div class="v-verticallayout v-layout v-vertical v-widget v-has-width v-has-height" style="position: absolute; width: 100%; height: 100%;">
<div class="v-expand" style="padding-top: 86px;">
<div class="v-slot v-slot-header" style="margin-top: -86px;">
<div class="v-horizontallayout v-layout v-horizontal v-widget header v-horizontallayout-header v-has-width v-has-height" style="width: 100%; height: 46px;">
<div class="v-expand" style="padding-left: 486px;">
<div class="v-slot" style="margin-left: -486px;">
<div class="v-spacing"></div>
<div class="v-slot v-align-middle">
<div class="v-spacing"></div>
<div class="v-slot v-slot-sp-gray v-align-right v-align-middle" style="width: 100%;">
<div class="v-widget -sp-gray v-has-width v-has-height sp-gray v-widget-sp-gray" style="width: 100%; height: 0px;">
<div class="v-sliderpanel-wrapper mode-top layout-horizontal flow-in-content sp-gray">
<div class="v-sliderpanel-content sp-gray" style="display: block; height: 631px;">
<div class="v-verticallayout v-layout v-vertical v-widget v-has-width v-margin-top v-margin-right v-margin-bottom v-margin-left" style="width: 100%;">
<div class="v-slot">
<div class="v-slot">
<div class="v-label v-widget v-has-width" style="width: 100%;">
<h2>1) Getting Started with EVOLt </h2>
</div>
</div>


1） EVOLt入门
这是我的项目中标签的Vaadin代码：

public void paintLayout() { 

        Label sliderHtml = new Label(String.format("<h1>EVOLT Help Center</h1>"),ContentMode.HTML);
        addComponent(sliderHtml);   
        Label label1 = new Label(("<h2>1) Getting Started with EVOLt</h2>"), ContentMode.HTML);
        addLayoutClickListener(new LayoutClickListener() {

            public void layoutClick(LayoutClickEvent event) {
                if (event.getChildComponent() == label1) {
                    System.out.println("clicked Label1");
                    removeAllComponents();
                    Label sliderHtml = new Label(String.format("<h3>Getting Started with EVOLT</h3>"),ContentMode.HTML);
                    addComponent(sliderHtml);
                    Resource mainHelpImage = new ClassResource("evolt_with_arrows_small.png");
                    addComponent(sliderHtml);

public void paintLayout（）{
Label sliderHtml=新标签（String.format（“EVOLT帮助中心”）、ContentMode.HTML）；
addComponent（sliderHtml）；
Label label1=新标签（（“1）开始使用EVOLt”），ContentMode.HTML）；
addLayoutClickListener（新的LayoutClickListener（）{
公共无效布局单击（布局单击事件）{
if（event.getChildComponent（）==label1）{
System.out.println（“单击标签1”）；
移除所有组件（）；
Label sliderHtml=新标签（String.format（“EVOLT入门”）、ContentMode.HTML）；
addComponent（sliderHtml）；
Resource main helpimage=new ClassResource（“带有箭头的evolt\u small.png”）；
addComponent（sliderHtml）；
我需要label1和sliderHtml文本颜色为白色。现在它是黑色的。有人能告诉我最简单的方法让我的标签文本变为白色而不是黑色吗？

我想出了一种方法：

Label label1 = new Label(
String.format("<font size = \"5\" color=\"white\"> MyText" )
, ContentMode.HTML);

标签标签1=新标签(
格式（“MyText”）
，ContentMode.HTML）；
添加上面的HTMLContentMode和适当的HTML使文本变为白色，但我必须将其逐个添加到每个元素中

谢谢。：

您对vaadin所做的事情很奇怪。通常您不会直接在java代码中编写HTML和/或CSS。通常您使用addStyleName（…）我尝试了这个方法，但在将CSS添加到样式表时无法应用颜色。我尝试在CSS中添加这个方法：.whiteLabelText{color:#FFFFFF；}，并在类中添加这个方法：label.setStyleName（“whiteLabelText”）；重新编译主题，白色不会被应用。它会保持黑色。最好使用addStyleName（）而不是setStyleName（），setXXX方法会清除所有其他样式（这通常不是您想要的）。可能您的SCS语法不正确，在
5
和
white
周围使用单引号而不是双引号。两者都是可接受的HTML和CSS。无需转义。我在Vaadin 8.1.3中验证了这一点。如下所示：
新标签（String.format（“无效”），ContentMode.HTML）