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

【问题标题】：GWT questions. How to implement this kind of Tab Panel or Docklayout PanelGWT 问题。如何实现这种 Tab Panel 或 Docklayout Panel
【发布时间】：2012-05-14 20:33:50
【问题描述】：

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

我想创建一个如下所示的面板（左侧的内容，右侧中间的一些文本（选项卡），或者右侧的顶部。（见第一张图片）

首先，我考虑了标签面板。但点击面板顶部只有水平选项卡。因此，除非我使用第三方库，否则这将不起作用。

然后我厌倦了docklayoutpanel。但也有一些问题。我把内容放在中间，在东边放了一个带有一些文字的标签。选项卡的高度将与内容的高度相同。（见第二张图）。我不喜欢这个。我不希望出现空白。

那么有人对如何实现这种面板有好的想法吗？

非常感谢。

问候！

第一张图片

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

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

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

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

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

第二张图片

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

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

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

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

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

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

【问题讨论】：

标签： gwt widget panel tabpanel docklayoutpanel

【解决方案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>

结果如下：

【讨论】：