1

TabLayoutPanelニーズに合わせてカスタム スタイルを使用して、 を使用して水平ナビゲーション バーを実装したいと考えています。

defaultしかし、スタイリングをオーバーライドする方法がわかりません。UiBinderテンプレートは次のとおりです。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

これはうまくいきません。しかし、どうすればデフォルトのスタイルを参照できますか?

4

7 に答える 7

4

atamur の回答を詳しく説明すると、特に他のすべてのスタイルが UiBinder またはクライアント バンドルを使用して設定されている場合、彼が提案する 2 番目のオプションは 2 つのうち実際には優れています。基本的に、最初の<ui:style>タグの下に次の行を追加します。

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

問題は、GWT が UiBinder テンプレートで定義したスタイル ルールを難読化していることです。したがって、「gwt-TabLayoutPanel」と記述すると、「GMDW0RHDH」のようなものに難読化され、TabLayoutPanel の要素には適用されません。「@external」を追加すると、この難読化が無効になり、UiBinder のスタイルを期待どおりに適用できるようになります。

于 2012-02-13T04:15:34.503 に答える
1

ここに動作する例があります

http://code.google.com/p/salvadordiaz/source/browse/trunk/gwt-exception-handler/src/fr/salvadordiaz/gwt/client/BlocImage.ui.xml?spec=svn56&r=56

于 2011-06-15T07:15:50.570 に答える
1

別のcssを添付すると思います-インラインスタイルは、同じテンプレートの{style.xyz}で使用するためのものです。実は、2 つ目の解決策があります。ui.xml に含めることを主張する場合は、外部スコープを使用してください: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

于 2011-03-31T10:38:11.273 に答える
1

!importantまたは、単にスタイル定義に追加することもできます...

于 2011-05-23T19:34:25.030 に答える
0

いくつかの調査の後、私は以下のアプローチを使用しましたが、うまくいきました...私はGWT 2.5を使用しています

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}
于 2013-02-15T12:37:13.557 に答える
0

GWT css ファイルがどのように宣言されているかを確認したい場合:

  1. gwt-user.jar を開く
  2. テーマのパッケージを見つけます。つまり、クリーン テーマの com.google.gwt.user.theme.clean を見つけて、public/gwt/clean/clean.css を開きます。
  3. how .gwt-TabLayoutPanel を見つけて、それがどのように宣言されているかを確認してください。
  4. 独自の css ファイルを作成し、your_module.gwt.xmlで宣言します。

必要に応じてテーマを変更できます。

于 2014-07-17T21:45:35.453 に答える