我正在使用GWT的StackLayoutPanel
并尝试通过在以下CSS规则中应用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;
}
当折叠标题项时,边框不会完全覆盖彼此,显示丑陋的白色角落末端。
如何解决这个问题?
以下是output's snapshot,供参考。
答案 0 :(得分:1)
假设您要使用old widgets' look n' feel,实现完全相同的结果将不可避免地涉及替换图像和弄乱窗口小部件的布局属性(例如应用负边距,更改偏移)。
话虽如此,我设法得到了一个基于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属性创建:
答案 1 :(得分:0)
嗯,StackLayoutPanel
绝对是一个比StackPanel
更新的版本。
但是我在这种情况下使用了后者,因为没有其他方法,它就像一个魅力!
感谢所有人!