Question

对于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>

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

所以我有问题为同一个Bootstrap元素的不同实例分配不同的颜色。我想可以直接在UiBinder中做到，但是在尝试了一切后我找不到合适的设置。我需要在UiBinder中覆盖的Bootstrap选择器（来自较少的导航文件）：

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

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

Answer 1

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

<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来执行此操作。这样，您可以在应用程序的不同位置的许多小部件上使用相同的样式。

Answer 2

通过结合这些想法，我得到了彻底的解决方案。解决方案是使用右侧选择器作为嵌套锚元素，但是分配给父级，因为锚在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>

在GWT Bootstrap中，如何为同一个Bootstrap元素的不同实例分配不同的样式？

2 个答案: