1

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>

这行不通。但是我怎样才能引用默认样式呢？

4

7 回答 7

4

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

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

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

于 2012-02-13T04:15:34.503 回答
1

我认为附加一个单独的 css - 内联样式用于在同一模板中与 {style.xyz} 一起使用。其实还有第二种解决办法。如果您坚持在 ui.xml 中使用它 - 使用外部范围：http ://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

于 2011-03-31T10:38:11.273 回答
1

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

于 2011-05-23T19:34:25.030 回答
0

经过一些研究，我使用了以下方法并且它有效......我使用的是 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-15T12:37:13.557 回答
0

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

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

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

于 2014-07-17T21:45:35.453 回答
0 
<ui:style>
    @external onMouseOverBorderColor onMouseOutBorderColor;
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>
于 2017-08-23T14:14:07.000 回答