-1

我正在使用 GWT ，并尝试通过在以下 CSS 规则中StackLayoutPanel应用属性来绕过其标题的角落：border-radius

.mm-StackPanelHeader {
  padding-left: 7px;
  font-weight: bold;
  font-size: 1.4em;
  width: 200px;
  border-radius: 5px 5px 0px 0px;
  background: #d3def6;
  border: 0.5px solid #bbbbdd;
}

折叠标题项时，边框不会完全相互覆盖，显示出难看的白色角端。

如何解决这个问题？

这是输出的快照，供参考。

4

2 回答 2

1

假设您要使用旧小部件的外观和感觉，实现完全相同的结果将不可避免地涉及替换图像和弄乱小部件的布局属性（例如应用负边距，更改偏移量）。

话虽如此，我设法获得了一个基于 CSS 的快速解决方案，该解决方案似乎针对您的需求，并且无需进一步操作。我确信可以使用更准确的解决方案，因为这种尝试远非完美，但它应该为您提供一个良好的起点。

抽象的

要模拟旧小部件的外观：

  • 将项目标题的顶角四舍五入。
  • 为底层容器应用背景颜色，以避免那些难看的白色角落。
  • 在该容器上也使用顶部圆角，以避免由于应用了背景颜色而在其上出现难看的蓝色角。
  • 重置标题项的底部填充以重新居中其内容。

执行

将以下规则添加到您的样式表中：

.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    background-color: #D3DEF6;
    border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
    padding-bottom: 0;
}

插图

这是最终结果的快照，通过在 GWT 展示实例上操作 CSS 属性创建：

堆栈布局面板已修改

于 2012-07-25T20:23:13.810 回答
0

嗯，StackLayoutPanel绝对是比StackPanel.

但是我在这种情况下使用了后者，因为没有其他方法，而且它就像一个魅力！

谢谢大家！

于 2015-01-07T22:00:22.797 回答