Question

我有以下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还找不到类。如果在另一方面，我把相同的样式元素放到按钮上，一切正常。

有人知道它的行为是什么吗？

此致斯蒂芬

Answer 1

在常规DOM元素上，在这种情况下你的DIV没有setStyleName（）方法，所以只需使用class属性：

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

styleName="..."适用于GWT小部件，因为它被转换为调用setStyleName（）方法。

顺便说一句，你可能想考虑在你的小部件上使用addStyleNames="..."，因为这允许你添加（多个）CSS类名而不会意外地丢弃已经存在的类名。

Answer 2

要像常规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>

....

所以只需使用“class”属性而不是“styleName”。

使用UiBinder为普通的html元素设置样式

2 个答案: