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}" >

また、TabLayoutPanelの基本的なCSSスタイルは、次の号のコメント＃5にあります。

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

于 2010-01-14T11:02:54.307 に答える
0

新しいTabLayoutPanelを使用しても同じ問題が発生しています（ページにタブが1つしかない場合でも、タブは表示されません）。代わりに（現在は非推奨の）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

UIを定義するために主にJavaコードを使用する人々のために。

説明

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 に答える