在DockLayoutPanel中嵌入TabLayoutPanel

Question

我正在尝试将TabLayoutPanel嵌入到DockLayoutPanel中，但选项卡没有显示出来:(

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:DockLayoutPanel unit='PX'>
        <g:north size='200'>
            <g:HTML>
                <h1>
                    My Header
      </h1>
            </g:HTML>
        </g:north>
        <g:center>

            <g:TabLayoutPanel barUnit='PX' barHeight='3'>
                <g:tab>
                    <g:header size='7'>
                        <b>HTML</b>
                        header
                    </g:header>
                    <g:Label>able</g:Label>
                </g:tab>
                <g:tab>
                    <g:customHeader size='7'>
                        <g:Label>Custom header</g:Label>
                    </g:customHeader>
                    <g:Label>baker</g:Label>
                </g:tab>
            </g:TabLayoutPanel>



        </g:center>
        <g:west size='192'>
            <g:HTML>
                <ul>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                    <li>Sidebar</li>
                </ul>
            </g:HTML>
        </g:west>
    </g:DockLayoutPanel>
</ui:UiBinder>

Answer 1

如果什么也看不到，请确保TabLayoutPanel (a)具有显式大小，或者(b)最终附加到RootLayoutPanel (有关更多详细信息，请参见http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize )。

如果问题是选项卡上缺少样式(即，您看到的只是标签应该在的位置的原始文本)，则需要添加一些样式(所需的CSS规则在TabLayoutPanel的javadoc中描述)。TabLayoutPanel还没有任何默认样式，但我们很快就会添加一些。

Answer 2

JavaDoc中的示例有些误导-栏高度3将隐藏制表符标题，并且需要为正文指定高度。使用像这样的东西：

<g:TabLayoutPanel barUnit='PX' barHeight='25' height="200px" >

或

<ui:style>
.tab {
    height: 200px;
}

​

<g:TabLayoutPanel barUnit='PX' barHeight='25' styleName="{style.tab}" >

此外，您还可以在以下问题的注释#5中找到TabLayoutPanel的基本CSS样式：

http://code.google.com/p/google-web-toolkit/issues/detail?id=4429

Answer 3

我在使用新的TabLayoutPanel时也遇到了同样的问题(即使它是页面上唯一的东西，标签也不会显示出来)。我决定重新使用(现在不推荐使用) TabPanel。试着看看这样做是否有效：

示例代码：

<g:TabPanel width="100%" height="100%" ui:field="gwtimeTabPanel">
    <g:Tab>
    <g:TabHTML>Tab title</g:TabHTML>
    <g:FlowPanel>
            <!-- tab contents goes here -->
        </g:FlowPanel>
    </g:Tab>
</g:TabPanel>