GWT问题。如何实现这种Tab Panel或Docklayout Panel

Question

我有一个复杂的GWT问题。希望有人能给我一些提示。

我想创建一个如下所示的面板（左侧内容，右侧中间的一些文本（标签），或右侧顶部。（参见第一张图片）< / p>

首先，我考虑了标签面板。但是水龙头面板上面只有水平标签。所以除非我使用第三方库，否则这将无效。

然后我厌倦了docklayoutpanel。但也有一些问题。我把内容放在中间，并在东边贴上一些带有文字的标签。选项卡的高度将与内容的高度相同。 （见第2张图片）。我不喜欢这个。我不想要显示白色空间。

那么有人对如何实现这种面板有很好的了解吗？

非常感谢。

问候！

第1张照片

|-------------------------|

|------- content ---------|---------|

|-------------------------|---tab---|

|-------------------------|---------|

| ------------------------|

---

第二张图片

|-------------------------|white space|

|------- content ---------|-----------|

|-------------------------|----tab----|

|-------------------------|-----------|

| ------------------------|white space|

另外，对于第二种方法，我尝试将docklayoutpanel的东区设置为透明。但我不知道该怎么做。我不确定它是否会清理白色空间区域。

Answer 1

将标签放在带有height: 100%的“东”面板中，并为其指定所需的背景颜色。将主要内容放在“中心”面板中。不要使用“北”或“南”。

如果您希望选项卡的垂直居中，那么最简单的方法是将VerticalPanel与verticalAlignment="MIDDLE"一起使用。

<ui:style>
  .centerPanel { background-color: royalblue; }
  .eastPanel { background-color: lightblue; width: 100%; height: 100%; }
</ui:style>

<g:DockLayoutPanel unit="EM">

  <g:center>
    <g:FlowPanel addStyleNames="{style.centerPanel}">
      <g:Label>Content</g:Label>
    </g:FlowPanel>
  </g:center>

  <g:east size="8">
    <g:VerticalPanel addStyleNames="{style.eastPanel}" 
                   verticalAlignment="MIDDLE">
      <g:FlowPanel>
        <g:Label>Tab1</g:Label>
        <g:Label>Tab2</g:Label>
      </g:FlowPanel>
    </g:VerticalPanel>
  </g:east>

</g:DockLayoutPanel>

结果如下：