4

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

<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>
4

4 回答 4

4

如果您什么也没看到，请确保 TabLayoutPanel (a) 具有明确的大小，或者 (b) 最终附加到 RootLayoutPanel（请参阅http://code.google.com/webtoolkit/doc/latest /DevGuideUiPanels.html#Resize了解更多详情）。

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

于 2010-01-05T18:26:38.037 回答
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

于 2010-01-14T11:02:54.307 回答
0

我在使用新的 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>
于 2009-12-30T21:36:45.840 回答
0

对于主要使用 Java 代码来定义 UI 的人。

解释

您应该设置 TabLayoutPanel 的父面板和 TabLayoutPanel 本身的大小。例如，我有一个 VerticalPanel 和一个 TabLayoutPanel，我将此 TabLayoutPanel 添加到 VerticalPanel（这使其成为 TabLayoutPanel 的父面板），如下所示： 

veticalPanel.add(tabLayoutPanel); 
RootPanel.get().add(verticalPanel);

什么也没做...

回答

你应该像这样

//set size
vertialPanel.setSize("100%","100%");
tabLayoutPanel.setSize("100%","100%")
RootPanel.get().add(verticalPanel);
于 2012-06-06T07:57:03.503 回答