1

テキストの横にいくつかの画像を表示できるように、タブにカスタム ウィジェットを配置する TabLayoutPanel があります。私はもともと TabPanel を使用し、タブ テキストにカスタム HTML を使用していましたが、カスタム タブ ウィジェットを使用すると、必要に応じてその場で画像を変更できます。

私のタブ ウィジェットは、基本的に Horizo​​ntalPanel、多数の小さな画像、および 1 行のテキストです。私が抱えている問題は、タブが通常のようにタブバーの下部にくっつきたくないということです。タブは、タブ バー用に予約されたスペースの上部に配置されており、タブ バーとタブ バーの下部の間に隙間があります。問題の画像をhttp://imgur.com/fkSHd.jpgにアップロードしました。

カスタム ウィジェット タブを正しく表示するために適用する必要があるスタイルはありますか?

4

2 に答える 2

1

私の簡単な経験では、新しい標準モード パネル (すべて「LayoutPanel」で終わる) は、古いもの (「Panel」で終わるもの) とうまくいきません。そのため、Horizo​​ntalPanel の代わりに DockLayoutPanel を試すことを検討すると、より協調的である可能性があります。

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels、特に「標準モードで機能しないものは何ですか?」というセクションを参照してください。

Horizo​​ntalPanel は少しトリッキーです。場合によっては、単純に DockLayoutPanel に置き換えることができますが、そのためには、子の幅を明示的に指定する必要があります。最も一般的な代替手段は、FlowPanel を使用し、float: left; を使用することです。その子の CSS プロパティ。もちろん、上記の注意事項を考慮している限り、Horizo​​ntalPanel 自体を引き続き使用することもできます。

于 2012-09-04T20:06:29.200 に答える
1

もう少し調査した結果、https: //groups.google.com/d/msg/google-web-toolkit/mq7BuDaTNgk/wLqPm5MQeicJで答えが見つかりました。通常の Label または HTML ウィジェットの代わりに、InlineLabel または InlineHTML ウィジェットを使用する必要がありました。私はこのソリューションをテストしましたが、それはまさに私が望むものです。完全を期すために、以下のクラスのコードを貼り付けました。ここで 2 つのことに注意してください。

  1. 最後の要素 (InlineLabel) に "float" 属性を設定できないか、不適切な描画条件が再び発生します。

  2. クラスを FlowPanel を含むコンポジットにする代わりに、クラスを FlowPanel から直接拡張することで、コードをさらにクリーンアップできます。

    package com.whatever;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Float;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineLabel;

public class StatusTab extends Composite
{
   public interface StatusImages extends ClientBundle
   {
      public static StatusImages instance = GWT.create(StatusImages.class);

      @Source("images/status-green.png")
      ImageResource green();

      @Source("images/status-red.png")
      ImageResource red();
   }

   private final ImageResource greenImage;
   private final ImageResource redImage;

   private final FlowPanel flowPanel;

   public LinkStatusTab(String text, int numStatuses) {

      greenImage = StatusImages.instance.green();
      redImage = StatusImages.instance.red();

      flowPanel = new FlowPanel();
      initWidget(flowPanel);

      for (int i = 0; i < numStatuses; i++)
      {
         Image statusImg = new Image(redImage);
         statusImg.getElement().getStyle().setMarginRight(3, Unit.PX);
         statusImg.getElement().getStyle().setFloat(Float.LEFT);
         flowPanel.add(statusImg);
      }

      flowPanel.add(new InlineLabel(text));
   }

   /**
    * Sets the image displayed for a specific status entry.
    */
   public void setStatus(int which, boolean status)
   {
      Image image = (Image)flowPanel.getWidget(which);
      if (status)
         image.setResource(greenImage);
      else
         image.setResource(redImage);
   }
}
于 2012-09-05T02:04:21.610 に答える