css – 如何使用UiBinder声明依赖的样式名称

前端之家收集整理的这篇文章主要介绍了css – 如何使用UiBinder声明依赖的样式名称前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的UiBinder小部件包含一个TextArea:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <g:TextArea visibleLines="3" />
</ui:UiBinder>

我想控制这个文本区域的背景颜色为可写和只读状态。 GWT使用“-readonly”样式的名称装饰器来实现这一点。所以我试试这个:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

显然,这将不工作,因为样式名称被混淆的CssResources导致这样的东西:

.G1x26wpeN {
    background-color:yellow
 }
.G1x26wpeO {
    background-color: lightgray;
}

可写文本区域的结果HTML如下所示:

<textarea tabindex="0" class="G1x26wpeN" rows="3"/>

只读textarea看起来像这样:

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>

如何声明样式,所以GWT将模糊主要部分,而不是“ – 可怕”解密器?

我知道我可以禁用整个样式名称的混淆。但我想在使用装饰器时保持混淆。

解决方法

此时(GWT 2.4)不支持,并不清楚是否/何时将被支持,请参阅GWT问题跟踪器中的 issue 4746

解决方法添加@external,这将禁用这些样式的模糊处理。在这种情况下,将是:

@external textBoxStyle,textBoxStyle-readonly;

猜你在找的CSS相关文章