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

我正在使用TabBar，我想以不同方式设置组件的样式。所以有一次这种风格，另一种风格。我认为这会工作，但事实并非如此：如何以不同方式设置标准GWT组件（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; 
}

但外观并没有改变。我做错了什么？

来源

2010-05-31 Mike Petterson

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());

不要犹豫，问，如果有什么事，你不明白。

来源

2010-05-31 13:06:25 Zwik

不，这不是问题在这里。我所有的CSS都适用于其他的东西。 – 2010-06-03 10:04:44

重新看你的代码，我认为这可能是因为在你的CSS中使用“.slickTab .gwt-TabBar .gwt-TabBarItem”。我在过去也尝试过这种方式，但它没有奏效。你需要将它们分开并将它们分开分配。 – Zwik 2010-06-03 15:10:27

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

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

另外，由于您要添加受父母风格影响的样式，如果是这种情况，您可能需要设置'setStylePrimaryName'而不是添加它，并使用处理程序在样式更改之间切换。

来源

2010-09-19 02:25:00

.slickTab .gwt-TabBar .gwt-TabBarItem将在某些类中使用类gwt-TabBar与class swt-TabBarItem进行匹配，其中类swtTab内有类slickTab。我想你只需要.slickTab .gwt-TabBarItem为CSS选择器。

我强烈建议使用FireBug检查由GWT生成的HTML结构以及如何将CSS选择器应用到它。

来源

2010-12-18 00:36:48

线：

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

修改类元素属性。和INSTANCE.css（）。slickTab（）不会做你的想法。这些没有注释的方法在css中将@def函数返回给java。让你想添加到MyCssResource什么：

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

所以，当GWT garbles的CSS倒挂该方法将返回corect类，EJ“AWES”。这些GWT的家伙是挤压东西迷恋:)

并记住，萤火虫&铬检查员是你的朋友。

来源

2011-02-10 23:10:56 mcosta

更改您的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; 
}

来源

2012-02-08 20:37:36

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

回答

相关问题