gwt - 更改 GWT Widget CSS 类前缀

Question

我有一个带有两个 TabPanel 的 GWT 应用程序。TabPanel 生成具有前缀 gwt-TabPanel 的 css 类。

有什么方法可以更改其中一张表的前缀吗？我希望能够独立设置两个 TabPanel 的样式。

Answer 1

为了解决这个问题，我做了：

使用 setStylePrimaryName(String); 这将更改 TabPanel 和 TabBar 使用的 CSS 类名称的前缀。

tabPanel.getTabBar().setStylePrimaryName("myTabBar"); 
tabPanel.setStylePrimaryName("myTabPanel");

在您的 CSS 文件中添加如下内容：

.myTabBar {
}

.myTabBar .gwt-TabBarFirst {
  width: 5px;  /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
  margin-left: 6px;
  padding: 3px 6px 3px 6px;
  cursor: pointer;
  cursor: hand;
  color: black;
  font-weight: bold;
  text-align: center;
  background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
  cursor: default;
  /* background: black; */
} 
.myTabBar .gwt-TabBarItem-disabled {
  cursor: default;
  color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
  border-width: 0px;
  overflow: hidden;
  padding: 6px;
}

对于第二个 TabPanel，您可以在 TabPanel 和 TabBar 上使用 setStylePrimaryName() 设置不同的值。然后使用第二个主要名称将新部分添加到 CSS 文件中。

Answer 2

您可以使用这些方法setStyleName()并addStyleName()为 GWT UI 对象设置或添加 css 样式。