如何重新设置GWT UIBinder模板中SplitLayoutPanel的拖动器 [英] How to restyle the draggers of the SplitLayoutPanel in GWT UIBinder template

问题描述

任何人都可以告诉我如何在SplitLayoutPanel的UIBinder模板中更改拖动器的风格。

can anyone tell me how I can change the style of the draggers in a UIBinder template for the SplitLayoutPanel.

这是我的MainMenu.ui.xml： p>

Here is my MainMenu.ui.xml:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style src="Resources/GlobalStyles.css" />

    <g:SplitLayoutPanel width="100%" height="100%" styleName='{style.splitLayoutPanel}'>
        <g:north size="100">
            <g:HTMLPanel/>
        </g:north>
        <g:west size="250">
            <g:HTMLPanel/>
        </g:west>
        <g:center>
            <g:HTMLPanel/>
        </g:center>
        <g:south size="50">
            <g:HTMLPanel
                styleName='{style.footerPanel}'>
                <div>
                    <a href="#">Contact us</a>
                    <a href="#">Privacy</a>
                    <a href="#">About</a>
                </div>
            </g:HTMLPanel>
        </g:south>
    </g:SplitLayoutPanel>

</ui:UiBinder>

Resources / GlobalStyles.css如下所示：

The Resources/GlobalStyles.css looks like this:

body,table {
    font-size: small;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    color: #000;
    background: #red;
}

.splitLayoutPanel { 
    .gwt-SplitLayoutPanel-HDragger { 
        background:#d0e4f6;
        cursor: col-resize;
    }

    .gwt-SplitLayoutPanel-VDragger {
        background: #d0e4f6;
        cursor: row-resize;
    }

}

.footerPanel {
    margin-left: 11px;
    padding: 10px;
    border-top: 2px solid #5693d6;
    text-align: right;
}

这里有什么问题？我的拖动器是不可见的，没有cursus的改变。

What's wrong here? My draggers are not visible and there is no cursus change.

推荐答案

我认为GWT不喜欢嵌套。所以重写这个CSS应该可以工作：

I think GWT doesn't like the nesting. So rewritting the css as follows should make it work:

.splitLayoutPanel .gwt-SplitLayoutPanel-HDragger { 
    background:#d0e4f6;
    cursor: col-resize;
}
.splitLayoutPanel .gwt-SplitLayoutPanel-VDragger {
    background: #d0e4f6;
    cursor: row-resize;
}

GWT可能会抱怨 .gwt- styles，在这种情况下，您的css中有以下几行：

Also GWT will probably complain about the .gwt- styles, in that case the following lines in your css:

@external .gwt-SplitLayoutPanel-HDragger;
@external .gwt-SplitLayoutPanel-VDragger;

这篇关于如何重新设置GWT UIBinder模板中SplitLayoutPanel的拖动器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！