addStyleName()的常见属性，表示setStyleName()甚至setStylePrimaryName()

我是GWT新手，通过在Eclipse中运行的一些示例来学习它。在这些程序中的一个按钮，我添加了setStyleName(class)(也检查了setStylePrimaryName())，并添加了一个样式，以使用addStyleName(类)。

我所期望的是按钮应该显示使用setStyleName()/setStylePrimaryname设置的css类属性，因为这将是primaryStylename。

但令我惊讶的是，如果我使用addStyleName()添加另一种样式的按钮，该样式得到作为按钮的样式，即使它是它的secondaryStyleName!在这种情况下，为了表达主样式名称，我必须使用addStyleDependentName()添加辅助样式名称。

我的代码设置样式如下:

final Button sendButton=new Button("Send");
final TextBox nameField=new TextBox();
sendButton.setStylePrimaryName("newButton");
sendButton.addStyleName("secondButton");

在css文件

 .newButton{
    display:block;
    font-size: 16pt;
    color: black;
    background-color: maroon;
}
.secondButton{
    color:blue;
    margin: 15px 10px 10px;
    background-color: olive;
}

按钮总是以橄榄色为背景色，除非它添加了addStyleDependentName("secondButton")和

案例2:同时使用addStyleName("secondButton")和setStyleName("newButton")(因为setStyleName()将删除现有的次要样式)。我还使用getStylePrimaryName()和getStyleName()检查了主样式名称和其他样式的值。

getStylePrimaryName()给出"newButton"， getStyleName()给出newButton,secondButton....所以，即使有一个主要的样式名称，为什么它总是显示通过addStyleName()添加的次要样式属性(这里是secondButton) ?

*请注意:我已经在下面的文本框上尝试了这个，它表达了预期的主要样式下提到的颜色*

final TextBox nameField=new TextBox();
nameField.setText("---Enter Name Here---");
nameField.setStylePrimaryName("textStyle");
nameField.addStyleName("myText");
nameField.addStyleName("bigText");

， CSS如下

.myText{
    color:blue;
}
.bigText{
    font-size: large;
}
.textStyle{
    color:maroon;
    text-shadow: aqua;
}

注意到的一件事是，除非我们不添加辅助样式addStyleDependentName()，属性显示的顺序在类名出现在CSS…也就是说，如果主样式名定义出现在次要样式名定义之后，则显示主样式名，否则显示次要样式名…通过改变CSS中定义类的顺序，可以注意到不同之处在我的按钮属性中，当我将顺序改为

.secondButton{
    color:blue;
    margin: 15px 10px 10px;
    background-color: olive;
}
 .newButton{
    display:block;
    font-size: 16pt;
    color: black;
    background-color: maroon;
}

按钮颜色变成了栗色。如果次要样式以addStyleDependentName()方式添加，则无论CSS

中的顺序如何，都表示主样式。

按Docs:

Adds a secondary or dependent style name to this object.

设置setStyleName()或setStylePrimaryName()后，addStyleName()将添加另一个style，它通过argument传递

样式主名称是与样式相关的名称添加后缀的名称。否则，它只是一个样式名， CSS规则适用(GWT不能做任何事情，它只是HTML+CSS+JS最终在浏览器中)

相关内容

最新更新

热门标签：