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

问题描述

我使用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（）; 
 
 code 
 
 
 
在CSS 
  .slickTab .gwt-TabBar .gwt-TabBarItem {
 background-color：＃ff0000; 
 font-weight：normal; 
} 
  
但外观不会改变。我做错了什么？
解决方案
更改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; 
} 
  
 
I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:
TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
And:
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();
}
In the CSS
.slickTab .gwt-TabBar .gwt-TabBarItem {
  background-color: #ff0000;
  font-weight: normal;
}
But the appearance don't change. What I am doing wrong?
 解决方案 
Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):
.gwt-TabBar.slickTab .gwt-TabBarItem {
    background-color: #ff0000;
    font-weight: normal;
}
                        
这篇关于如何以不同方式设置标准GWT组件（TabBar）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！