GWT - 設計TabLayoutPanel的問題

我想使用TabLayoutPanel實現水平導航欄，使用自定義樣式來滿足我的需求。GWT - 設計TabLayoutPanel的問題

但我不知道如何覆蓋default樣式。這裏的UiBinder模板：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style> 
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader { 
     background-color: red; 
     padding: 0; 
     margin: 0; 
    } 
    </ui:style> 
    <g:TabLayoutPanel barHeight="3.75" barUnit="EM"> 
    <g:tab> 
     <g:header>Latest</g:header> 
     <g:Label>Latest Activities</g:Label> 
    </g:tab> 
    <g:tab> 
     <g:header>Patients</g:header> 
     <g:Label>Patients</g:Label> 
    </g:tab> 
    </g:TabLayoutPanel> 
</ui:UiBinder>

這是行不通的。但是我怎樣才能引用默認樣式？

來源

2011-03-22 helpermethod

附加一個單獨的CSS我認爲 - 內聯樣式用於{style.xyz}在同一模板中。其實還有第二種解決方案。如果你堅持在ui.xml有它 - 使用外部範圍：http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

來源

2011-03-31 10:38:11 atamur

或者你可以簡單地添加!important你的風格定義...

來源

2011-05-23 19:34:25

這裏的作品

http://code.google.com/p/salvadordiaz/source/browse/trunk/gwt-exception-handler/src/fr/salvadordiaz/gwt/client/BlocImage.ui.xml?spec=svn56&r=56

爲例

來源

2011-06-15 07:15:50

爲了詳細說明atamur的答案，他建議的第二個選項真的是兩個中的更好的，特別是如果所有其他樣式都使用UiBinder或客戶端軟件包進行設置。基本上，你添加以下行您最初的<ui:style>標籤下面：

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

的問題是，GWT是混淆您在UiBinder的模板中定義的樣式規則。所以當你編寫「gwt-TabLayoutPanel」時，會被混淆成類似「GMDW0RHDH」的東西，然後它就不會應用到TabLayoutPanel的元素上。添加「@external」會禁用此混淆，並允許按照您的預期應用UiBinder中的樣式。

來源

2012-02-13 04:15:34 Andrew

是否有可能您（或任何其他人）可以爲GWT 2.5.1提供工作示例，因爲我似乎無法使其工作。謝謝。 – 2014-01-07 09:34:10

一些研究後，我用下面的方法和它的工作...我使用GWT 2.5

/**the panel itself**/ 
.gwt-TabLayoutPanel { 
    border: none; 
    margin: 0px; 
    padding: 0px; 
} 
/**the tab bar element**/ 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs { 
    background-color: #F4F4F4 !important; 
} 
/**an individual tab**/ 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab { 
    background-color: #6F6F6E !important; 
} 

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected { 
    background-color: white !important; 
} 
/**an element nested in each tab (useful for styling)**/ 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner { 
    font-family: Arial !important; 
} 

/**applied to all child content widgets**/ 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent { 
    border: none; 
    margin: 0px; 
    overflow: hidden; 
    padding: 15px; 
}

來源

2013-02-15 12:37:13

如果你想看到GWT css文件是怎麼聲明：

打開GWT -user.jar
找到主題包，即：com.google.gwt.user.theme.clean for Clean主題，並打開public/gwt/clean/clean.css。
查找如何.gwt-TabLayoutPanel並查看它是如何聲明的。
讓自己的CSS文件，並在your_module.gwt.xml聲明它

如果需要，您可以更改主題。

來源

2014-07-17 21:45:35 teteArg

<ui:style> 
    @external onMouseOverBorderColor onMouseOutBorderColor; 
    .onMouseOverBorderColor {border-color: red; border-style: outset} 
    .onMouseOutBorderColor {border-color: black; border-style: outset} 
</ui:style>

來源

2017-08-23 14:14:07 Abhishek2k6

您可以爲正在發生的事情添加一些上下文嗎？ – 2017-08-23 15:46:29

GWT - 設計TabLayoutPanel的問題

回答

相關問題