вопросы ГВТ. Как реализовать этот тип панели вкладок или панели Docklayout

У меня сложный вопрос по GWT. Жаль, что кто-то может дать мне несколько советов.

Я хочу создать панель, которая выглядит следующим образом (содержимое слева и некоторые тексты в середине правой стороны (вкладка), ИЛИ в верхней части правой стороны. (см. первое изображение)

Во-первых, я рассмотрел панель вкладок. но панель крана имеет только горизонтальную вкладку сверху. Так что это не сработает, если я не использую сторонние библиотеки.

Потом мне надоела док-панель. но есть и проблема. Я поместил содержимое посередине и поместил метку с текстом на востоке. Высота вкладки будет такой же, как и высота содержимого. (см. 2-ю картинку). Мне это не нравится. Я не хочу, чтобы отображалось белое пространство.

Итак, у кого-нибудь есть хорошая идея о том, как реализовать такую ​​​​панель?

Большое спасибо.

С Уважением!

1-я картина

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

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

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

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

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

2-я картина

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

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

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

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

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

Кроме того, для второго метода я попытался сделать восточную область панели дока прозрачной. Но я не знал, как это сделать. и я не уверен, очистит ли он пустое пространство.


widget panel tabpanel gwt docklayoutpanel
person Joey    schedule 14.05.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поместите вкладки на восточную панель с помощью 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>

Результат выглядит следующим образом:

введите здесь описание изображения

person Chris Lercher    schedule 15.05.2012