0

複雑な GWT の質問があります。誰かが私にいくつかのヒントを与えることができれば幸いです。

次のようなパネルを作成したい (左側にコンテンツ、右側の中央 (タブ) にいくつかのテキスト、または右側の上部) (最初の図を参照)

まず、タブパネルについて考えました。ただし、タップ パネルには上部に水平タブしかありません。したがって、サードパーティのライブラリを使用しない限り、これは機能しません。

それから私はドックレイアウトパネルを疲れさせました。しかし、いくつかの問題もあります。コンテンツを中央に配置し、テキストを含むラベルを東に配置しました。タブの高さはコンテンツの高さと同じになります。（2枚目の写真を参照）。私はこれが好きではありません。空白を表示したくありません。

では、この種のパネルを実装する方法について誰かが良い考えを持っていますか?

どうもありがとう。

よろしく！

1枚目の写真

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

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

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

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

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

2枚目の写真

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

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

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

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

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

また、2番目の方法として、docklayoutpanelの東のエリアを透明に設定してみました。しかし、これを行う方法がわかりませんでした。それが空白領域を一掃するかどうかはわかりません。

4

1 に答える 1

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>

結果は次のようになります。

ここに画像の説明を入力

于 2012-05-15T21:15:06.077 に答える