Стилизация обычных HTML-элементов с помощью UiBinder - PullRequest
Новая
       2

Стилизация обычных HTML-элементов с помощью UiBinder

2 голосов
/ 22 сентября 2011

У меня есть следующий код UiBinder: 

...
    <div>
        <g:Label>Hello,</g:Label>
        <g:Button ui:field="button" />
    </div>
...

Теперь я хочу стилизовать элемент div и, скажем, дать ему красную рамку. Насколько я знаю, ясный способ определить атрибут стиля следующим образом: 

    <ui:style>
    .redborder {
        border: 1px solid red;
    }
    ...

</ui:style>

так что код в целом будет выглядеть так: 

...
        <div styleName="{style.redborder}">
            <g:Label>Hello,</g:Label>
            <g:Button ui:field="button" />
        </div>
...

но на странице HTML красная граница не рисуется. Теперь я заглянул на страницу с Firebug (или как вы называете это в Google Chrome) и увидел, что элемент div имеет правильное имя класса, но borwser пока не может найти класс. Если, с другой стороны, я добавляю к кнопке тот же элемент стиля, все работает нормально.

Кто-нибудь имеет представление, как он себя ведет?

С уважением, Stefan

Ответы [ 2 ]

9 голосов
/ 22 сентября 2011

На обычных элементах DOM, в вашем DIV в этом случае нет метода setStyleName (), поэтому просто используйте атрибут class: 

<div class="{style.redborder}"> ... </div>

styleName="..." работает с виджетами GWT, потому что он переводится для вызова метода setStyleName ().

Кстати, вы можете рассмотреть возможность использования addStyleNames="..." в своих виджетах, поскольку это позволяет добавлять (несколько) имен классов CSS без случайного удаления уже существующих имен классов.

0 голосов
/ 28 июля 2012

Чтобы использовать его как обычный HTML, вы должны думать в обычном HTML!

Давайте рассмотрим пример: 

<ui:style>
  .redborder {
    border: 1px solid red;
  }
  ...
</ui:style>

...

<div class="{style.redborder}">   <!--Notice I used class instead of styleName-->
  <g:Label>Hello,</g:Label>
  <g:Button ui:field="button" />
</div>

....

Так что просто используйте "Атрибут класса "вместо" styleName ".

...