0
我想更改面板标题(标题)的CSS。但我不知道如何去做。如何更改面板标题CSS?
我想通过我自己的类来代替类v-panel-caption
<div class="v-panel v-widget v-has-width v-has-height">
<div style="margin-top: -37px;" class="v-panel-captionwrap">
<div class="v-panel-caption">
<span>My caption</span>
</div>
</div>
...
</div>
TO
<div class="v-panel v-widget v-has-width v-has-height">
<div style="margin-top: -37px;" class="v-panel-captionwrap">
<div class="my-panel-caption">
<span>My caption</span>
</div>
</div>
...
</div>
的解决办法是定义一个主风格:
public class myPanel extends Panel {
public myPanel() {
this.setCaption("My Caption");
this.setContent(new Label("test");
this.setPrimaryStyleName("my-panel-caption");
}
}
但这种改变只有全球<div>
:
<div class="v-panel-my-panel-caption my-panel-caption">
<div style="margin-top: -37px;" class="v-panel-captionwrap">
<div class="v-panel-caption">
<span>My caption</span>
</div>
</div>
...
</div>
有什么方法可以自定义面板标题CSS?或者我应该编写一个新的布局(也许使用CssLayout)?
我发现的唯一方法是使用CSS重要的标记:
.my-panel-caption {
box-sizing: border-box !important;
padding: 0 12px !important;
line-height: 36px !important;
border-bottom: 5px solid #23C344 !important;
background-color: #4F9EE5 !important;
color: #FFFFFF !important;
font-weight: 400 !important;
font-size: 14px !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) !important;
border-radius: 3px 3px 0 0 !important;
background-image: none !important;
box-shadow: none !important;
}
但我不喜欢这样:(
由于提前,
通常,我为组件添加一个自定义样式名称,然后重新定义样式。例如:'.my-panel .v-panel-caption {background-color:red; }'......这应该没有'!important'。 –
实际上,我只是想为特定页面定制此面板。不是为了所有人。 – Splendf
对不起,我很蠢:) – Splendf