[英]CssResource change style
我有這樣的界面
public interface PopupPanelWithConfirmStyle extends ClientBundle {
public static final PopupPanelWithConfirmStyle I = GWT.create(PopupPanelWithConfirmStyle.class);
@Source("PopupPanelWithConfirmStyle.css")
public Style css();
public interface Style extends CssResource {
@ClassName("popupPanelWithConfirmStyle")
String popupPanelWithConfirmStyle();
@ClassName("confirmButton")
String confirmButton();
}
}
我有標准的按鈕,其中gwt-PushButton向上,.gwt-PushButton向上懸停,.gwt-PushButton向上禁用,.gwt-PushButton向下,.gwt-PushButton-向下懸停,.gwt- Push-down-disabled和其他樣式
所以我設置了PushButton樣式-ConfirmButton並編寫自己的CSS
.popupPanelWithConfirmStyle {
background: none repeat scroll 0 0 white;
padding: 3px;
z-index: 100;
}
.confirmButton{
border-radius: 2px 2px 2px 2px;
margin: 0;
text-decoration: none;
padding: 3px 5px;
}
@external confirmButton-up, confirmButton-up-hovering, confirmButton-up-disabled, confirmButton-down, confirmButton-down-hovering, confirmButton-down-disabled
.confirmButton-up {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #BBBBBB #BBBBBB #A0A0A0;
border-style: solid;
border-width: 1px;
cursor: pointer;
}
.confirmButton-up-hovering {
border: 1px solid #939393;
cursor: pointer;
}
.confirmButton-up-disabled {
border: 1px solid #BBBBBB;
cursor: default;
opacity: 0.5;
}
.confirmButton-down {
border: 1px inset #666666;
cursor: pointer;
outline: medium none;
padding: 4px 4px 2px 6px;
}
.confirmButton-down-hovering {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #333333 #939393 #939393;
border-right: 1px solid #939393;
border-style: solid;
border-width: 1px;
cursor: pointer;
}
.confirmButton-down-disabled {
border: 1px outset #CCCCCC;
cursor: default;
opacity: 0.5;
}
當我運行gwt時-我看到了-
div tabindex="0" class="GGUR4G1EN GGUR4G1EN-up" role="button" aria-pressed="false"
我該怎么辦? .confirmButton-up將轉換為GGUR4G1EN-up
對不起我的英語不好。
當前無法實現: http : //code.google.com/p/google-web-toolkit/issues/detail?id=4746
如果你想利用相關的樣式名稱的優勢,你必須禁用模糊你的類名(例如,使用@external
在CSS,不僅為-up
, -hover
等變種,但也主要樣式名稱) 。 但是,這意味着CSS資源之間可能存在命名沖突。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.