Вопрос по – Стилизация кнопки GWT с помощью CSS

6

Я пытаюсь применить CSS с GWTButton виджет, однако я могу применить CSS-градиент, «тиснением» Стиль виджета все еще там. Как я могу удалить это?

Мое приложение gwt наследует от этой темы:

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

Алс попробовал:

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

Я также попытался добавить:

.gwt-Button {}

В основном файле CSS, который загружен на странице, однако, тисненый стиль все еще там.

Кто-нибудь знает, как снять рельефный стиль?

Ваш Ответ

2   ответа
11
Option 1: Not using themes at all

как правило, вы хотите придать странице свой собственный стиль, то проще всего полностью опустить<inherits> Заявление по темам. GWT работает очень хорошо без использования темы.

(Note: If you still need the (image) resources from the theme, but without injecting the CSS stylesheet into the page, you can inherit com.google.gwt.user.theme.clean.CleanResources instead of com.google.gwt.user.theme.clean.Clean. This way they will still be copied automatically to your war folder.)

Option 2: Selectively turning off theming for buttons

Однако, если вы, как правило, хотите использовать тему, и вам нужно только придать некоторым кнопкам собственный стиль, простое решение - это вызов

button.removeStyleName("gwt-Button");

Note: Instead of removeStyleName() you could also use 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>...
Option 3: Actually changing the gwt-Button class attributes

Если вы хотите сохранить тематический вид кнопок и изменить только несколько атрибутов стиля, то возможно также перезаписать определенные атрибуты в предопределенных классах стиля с помощью!important (как предложено @bouhmid_tun). Но будьте осторожны: список атрибутов может измениться в будущем. Вот все предопределенные классы стилей для.gwt-Button GWT 2.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;
}
Error: User Rate Limit Exceeded
3

!important тег в моем файле CSS. Вы найдете здесь пример этого:Удалить абсолютную позицию, созданную GWT, Удачи!

Error: User Rate Limit Exceeded xybrek

Похожие вопросы