java - GWT-2.5.1：如何正确使用 UIBinder 将 CSS 的大纲参数添加到 DialogBox？

Question

我想添加 CSS 的“大纲”参数。
Java 代码。

package com.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Widget;

public class MyDialogBox extends DialogBox {

    private static final Binder binder = GWT.create(Binder.class);

    interface Binder extends UiBinder<Widget, MyDialogBox> {

    }

    public MyDialogBox() {
        setWidget(binder.createAndBindUi(this));
    }
}

XML 代码。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <ui:style>
        .panel {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            outline: 15px solid blue;
            background-color: ivory;
            /*margin: 15px;*/
        }
    </ui:style>

    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.panel}">
        <g:tab>
            <g:header size='20'>tab1</g:header>
            <g:Label>label1</g:Label>
        </g:tab>
        <g:tab>
            <g:header size='20'>tab2</g:header>
            <g:Label>label2</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
</ui:UiBinder>

轮廓边框不显示。

但是当我删除边距参数的注释时会显示它。

如何在没有边距参数的情况下正确添加大纲参数？

Answer 1

border如果您不想添加，则必须使用属性margin。一个解决方案是用另一个 div 包装。

示例（未经测试，它们可能需要一些调整）：

<ui:style>
    .panel {
        width: 400px;
        height: 200px;
        border: 1px solid red;
        /* DELETED border: 15px solid blue; */
        background-color: ivory;
        /* DELETED margin: 15px; */
    }
    .subpanel {
        border: 15px solid blue;
    }
</ui:style>

<div class="panel">
    <g:TabLayoutPanel barUnit='EM' barHeight='1' styleName="{style.subpanel}">
        <g:tab>
            <g:header size='20'>tab1</g:header>
            <g:Label>label1</g:Label>
        </g:tab>
        <g:tab>
            <g:header size='20'>tab2</g:header>
            <g:Label>label2</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
</div>

我建议您查看w3school 的文档以outline获取有关该属性的更多详细信息。

我这会帮助你。