GWT - TabLayoutPanel 样式问题

Question

我想使用 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>

这不起作用。但是我如何引用默认样式呢？

Answer 1

为了详细说明 atamur 的答案，他建议的第二个选项实际上是两个选项中更好的一个，特别是如果您所有其他样式都是使用 UiBinder 或客户端捆绑包设置的。基本上，您可以在初始 标记下方添加以下行：

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

问题是 GWT 混淆了您在 UiBinder 模板中定义的样式规则。因此，当您编写“gwt-TabLayoutPanel”时，它会被混淆为“GMDW0RHDH”之类的内容，然后它永远不会应用于 TabLayoutPanel 的元素。添加“@external”会禁用这种混淆，并允许按照您的预期应用 UiBinder 中的样式。

Answer 2

附加一个单独的CSS，我认为 - 内联样式可与同一模板中的 {style.xyz} 一起使用。其实还有第二种解决方案。如果您坚持将其放在 ui.xml 中 - 使用外部作用域：http ://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

Answer 3

或者您可以简单地将 !important 添加到您的样式定义中...

Answer 4

这是一个有效的示例

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

Answer 5

经过一番研究后，我使用了下面的方法并且它有效...我正在使用 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;
}

Answer 6

如果你想查看 GWT css 文件是如何声明的：

1. 打开 gwt-user.jar
2. 找到主题包，即：Clean Theme 的 com.google.gwt.user.theme.clean，以及打开 public/gwt/clean/clean.css。
3. 查找 .gwt-TabLayoutPanel 并了解其声明方式。
4. 制作您自己的 css 文件并在 your_module.gwt.xml 中声明它。

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

Answer 7

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