0

对于 GWT Bootstrap，我将 NavLists 定义为：

<b:NavList>
    <b:NavHeader>My Header</b:NavHeader>
    <b:NavLink href="#menu1:">My Menu1</b:NavLink>
    <b:NavLink href="#menu2:" active="true">My Menu2</b:NavLink>
</b:NavList>

在同一个应用程序中，我有两种这样的组件，（1）一种放在白色面板上作为左侧菜单，（2）另一种放在深绿色面板上作为底部菜单。两者都是导航列表。

因此，我遇到了为相同 Bootstrap 元素的不同实例分配不同颜色的问题。我想可以直接在 UiBinder 中完成，但是在尝试了一切之后我没有找到正确的设置。我需要在 UiBinder 中覆盖的引导选择器是（来自较少的导航文件）：

.nav-list > li > a {
   padding: 3px 15px;
   color: #FF0000;   <======= how to override this color in UiBinder
}

我发现这将是一个非常常见的用例，相同的元素，不同风格的实例。如何解决？

4

2 回答 2

0

通过结合这些想法，我得到了彻底的解决方案。解决方案只是为嵌套的锚元素使用正确的选择器，但分配给父元素，因为锚在 UiBinder 中不可用，即：

<ui:style>
    .myCustomStyle > li > a {               (<---- see this selector)
        color: YOUR COLOR HERE;
    }
</ui:style>

...

<b:NavList addStyleNames="{style.myCustomStyle}">     (<---- see applied to parent and addStyleNames)
    <b:NavHeader>My Header</b:NavHeader>
    <b:NavLink href="#menu1:">My Menu1</b:NavLink>
    <b:NavLink href="#menu2:" active="true">My Menu2</b:NavLink>
</b:NavList>
于 2013-10-10T20:42:09.633 回答
0

您需要做的就是添加一个自定义样式名称，就像您通常对任何样式所做的那样。

<ui:style>
    .myCustomStyle > li > a {
        color: YOUR COLOR HERE;
    }
</ui:style>

...

<b:NavList styleName="{style.myCustomStyle}">
    <b:NavHeader>My Header</b:NavHeader>
    <b:NavLink href="#menu1:">My Menu1</b:NavLink>
    <b:NavLink href="#menu2:" active="true">My Menu2</b:NavLink>
</b:NavList>

上面的示例直接在 UiBinder 文件中具有样式。你也可以用ClientBundle它来做。这样您就可以在应用程序中不同位置的许多小部件上使用相同的样式。

于 2013-10-07T01:50:22.090 回答