Question

我正在使用TabBar，我想以不同的方式设置组件的样式。所以有一次这种风格，另一种时候那种风格。我认为这会奏效，但事实并非如此：

TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );

和

public interface MyResources extends ClientBundle
{
 public static final MyResources INSTANCE = GWT.create(MyResources.class);
 @Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
 String slickTab();
}

在CSS

中

.slickTab .gwt-TabBar .gwt-TabBarItem {
  background-color: #ff0000;
  font-weight: normal;
}

但外观不会改变。我做错了什么？

Answer 1

您可以在CSS中强制执行此操作。

.slickTab .gwt-TabBar .gwt-TabBarItem {
    background-color: #ff0000 !important;
    font-weight: normal !important;
}

此外，由于您要添加一个受父样式约束的样式。如果是这种情况，您可能需要设置'setStylePrimaryName'而不是添加它，并在样式更改与处理程序之间切换。

Answer 2

更改您的CSS。 .slickTab .gwt-TabBar .gwt-TabBarItem将匹配slickTab中TabBar内的TabBarItem。但是，由于TabBar 是slickTab，而不是里面它，你需要做这样的事情（注意.gwt-TabBar.slickTab）：

.gwt-TabBar.slickTab .gwt-TabBarItem {
    background-color: #ff0000;
    font-weight: normal;
}

Answer 3

MyCssResource接口需要在MyResources内部。

这是一个例子：

public interface Resources extends ClientBundle
{
    public static final Resources INSTANCE = 
        GWT.create( Resources.class );

    /***********************************************
     *                    Home
     ***********************************************/
    @Source( "./css/home.css" )
    public HomeCss getHomeCss();

    public interface HomeCss extends CssResource
    {
         String loginBtn();
    }

    /***********************************************
     *                Another Page
     ***********************************************/
    @Source( "./css/AnotherPage.css" )
    public AnotherPage getAnotherPageCss();

    public interface AnotherPage extends CssResource
    {
         String title();
    }
}

这是我使用各种资源的方式，它运作得很好。
无论何时需要在同一方法或函数中多次使用它，您都可以这样做：

HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );

不要犹豫，询问是否有任何你不理解的事情。

Answer 4

.slickTab .gwt-TabBar .gwt-TabBarItem将使用类gwt-TabBarItem与类gwt-TabBar中的内容匹配，其中包含类slickTab。我想你只想要.slickTab .gwt-TabBarItem作为CSS选择器。

我强烈建议使用FireBug来检查GWT生成的HTML结构以及CSS选择器的应用方式。

Answer 5

该行：

t.addStyleName（MyResources.INSTANCE.css（）。slickTab（））;

修改类元素属性。而INSTANCE.css（）。slickTab（）并没有按照你的想法去做。这些没有注释的方法会将java中的@ def发回给java。要使你想要的东西添加到MyCssResource：

@ClassName("slickTab")
String slickTab();

因此，当GWT颠倒css时，该方法将返回corect类，ej“awEs”。这些GWT家伙对挤压东西非常着迷：）

请记住，萤火虫＆amp; chrome-inspector是你的朋友。

如何以不同方式设置标准GWT组件（TabBar）的样式？

5 个答案: