Question

如何使用UIBinder在GWT中为Anchor添加样式？我在UiBinder模板XML中有以下代码：

<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor>

我知道.gwt-Anchor {}用于为这个小部件设置样式，但仍然不知道如何设置悬停效果的样式。在普通的CSS中它会是这样的：

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

我是否必须使用Anchor上的BlurEvent和FocusEvent处理程序来处理这个问题？如果是这样......那就是样板代码..

Answer 1

对gwt-Anchor类使用相同的CSS伪类：

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

您也可以使用a.gwt-Anchor，但这不是必需的。

Answer 2

如果您将uibinder与gwt HyperLink一起使用，可以这样做：

<ui:style>
.mystyle a:link {
color:#3F3F3F; 
text-decoration:none;
}   
</ui:style>

<g:FlowPanel>
    <g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>

Answer 3

这是否有效（使用UIBinder样式名称）？

<ui:style>
  .a:link { color: #FF0000; }
  .a:visited { color: #00FF00; }
  .a:hover { color: #FF00FF; }
  .a:active { color: #000FF; }
</ui:style>
<g:HTMLPanel>
  <g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor>
</g:HTMLPanel>

Answer 4

像这样定义你的风格：

<ui:style>
  .menuItem a:link {color: white;}
  .menuItem a:visited {color: white;}
  .menuItem a:hover {color: white;}
  .menuItem a:active {color: white;}
</ui:style>

并像这样使用它：

<g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>

如何在GWT中设置锚点样式？

4 个答案: