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或客户端捆绑设置。基本上，您在初始<ui:style>标记下面添加以下行：

@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文件：

打开gwt-user.jar
找到主题的包，即： Clean Theme 的com.google.gwt.user.theme.clean，然后打开public / gwt / clean / clean.css。
查找.gwt-TabLayoutPanel的方法，看看它是如何声明的。
制作您自己的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>

GWT - 设置TabLayoutPanel样式的问题

7 个答案: