如何以不同方式設置標準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）的樣式？

回答

相關問題