Как оформить якорь в GWT? - PullRequest
Новая
       6

Как оформить якорь в GWT?

6 голосов
/ 16 февраля 2011

Как я могу добавить стиль для Anchor в GWT, используя UIBinder? У меня есть следующий кусок кода в шаблоне XML UiBinder: 

<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 */

Нужно ли обрабатывать это с помощью обработчиков BlurEvent и FocusEvent на Anchor? Если это так ... это стандартный код ..

Ответы [ 4 ]

8 голосов
/ 16 февраля 2011

Используйте те же псевдоклассы CSS с классом gwt-Anchor: 

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

Вы также можете использовать a.gwt-Anchor, но это не является строго обязательным.

3 голосов
/ 10 октября 2011

Если вы используете uibinder с gwt HyperLink, это можно сделать так: 

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

<g:FlowPanel>
    <g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>
0 голосов
/ 12 октября 2014

Определите свой стиль следующим образом: 

<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>
0 голосов
/ 17 февраля 2011

Работает ли это (используя имена стилей 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>
...