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

【问题标题】：Styling normal html elements with UiBinder使用 UiBinder 设置普通 html 元素的样式
【发布时间】：2011-09-22 12:09:10
【问题描述】：

我有以下 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 元素具有正确的类名，但是浏览器还找不到该类。另一方面，如果我将相同的样式元素放在按钮上，一切正常。

有人知道它的行为方式吗？

问候，斯蒂芬

【问题讨论】：

标签： html gwt uibinder

【解决方案1】：

在常规 DOM 元素上，在这种情况下是您的 DIV，没有 setStyleName() 方法，所以只需使用类属性：

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

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

顺便说一下，您可能需要考虑在您的小部件上使用addStyleNames="..."，因为这允许您添加（多个）CSS 类名，而不会意外删除已经存在的类名。

【讨论】：

谢谢，我也找到了。 code.google.com/webtoolkit/doc/latest/…

【解决方案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”。

【讨论】：