6

GWTウィジェットでcssを適用しようとしていますButtonが、CSSグラデーションを適用できますが、ウィジェットの「エンボス」スタイルはまだ残っています。どうすればそれを削除できますか？

私のgwtアプリケーションはこのテーマから継承しています：

<inherits name='com.google.gwt.user.theme.clean.Clean'/>

アルスは試しました：

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

私も追加してみました：

.gwt-Button {}

ページに読み込まれるメインのcssファイルには、エンボス加工されたスタイルが残っています。

エンボススタイルを削除する方法を知っている人はいますか？

4

2 に答える 2

11

オプション1：テーマをまったく使用しない

デフォルトのスタイルが不要で、通常はページに独自のスタイルを付けたい場合は<inherits>、テーマのステートメントを完全に省略するのが最も簡単です。GWTは、テーマを使用しなくても非常にうまく機能します。

（注：テーマの（画像）リソースがまだ必要であるが、CSSスタイルシートをページに挿入せずに、com.google.gwt.user.theme.clean.CleanResources代わりに継承することができますcom.google.gwt.user.theme.clean.Clean。これにより、それらは引き続き自動的にwarフォルダーにコピーされます。）

オプション2：ボタンのテーマを選択的にオフにする

ただし、一般的にテーマを使用し、一部のボタンに独自のスタイルを与えるだけでよい場合は、簡単な解決策は次のようになります。

button.removeStyleName("gwt-Button");

注：代わりにremoveStyleName()を使用することもできますsetStyleName("my-Button")。

利便性のために（そしてUiBinderでより簡単に使用するために）、次のような独自のクラスを派生させることができます。

package org.mypackage;

public class MyStyleButton extends Button {
    public MyStyleButton(final String html) {
        super(html);
        removeStyleName("gwt-Button");
    }

    /* ... override all the other Button constructors similarly ... */
}

その後、インポートしてUiBinderで使用できます。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:my='urn:import:org.mypackage'>

    ...

       <my:MyStyleButton>...

オプション3：実際にgwt-Buttonクラスの属性を変更する

ボタンのテーマのある外観を維持し、いくつかのスタイル属性のみを変更したい場合は、事前定義されたスタイルクラスの特定の属性を!important（@bouhmid_tunによって提案されているように）上書きすることもできます。ただし、注意してください。属性のリストは将来変更される可能性があります。.gwt-Button便宜上、GWT2.4.0の事前定義されたすべてのスタイルクラスを次に示します。

.gwt-Button {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: url("images/hborder.png") repeat-x 0px -2077px;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
}
.gwt-Button:active {
  border: 1px inset #ccc;
}
.gwt-Button:hover {
  border-color: #939393;
}
.gwt-Button[disabled] {
  cursor: default;
  color: #888;
}
.gwt-Button[disabled]:hover {
  border: 1px outset #ccc;
}
于 2012-05-07T08:19:45.737 に答える
3

GWTのデフォルトのスタイルを使用しないようにするため!importantに、CSSファイルでタグを使用しています。その例をここに示します。GWTによって生成された絶対位置を削除します。幸運を！

于 2012-05-06T16:34:59.760 に答える