TabLayoutPanel將標籤右對齊

我在GWT中使用了TabLayoutPanel，我希望最後一個標籤顯示在頁面的右側。是否有可能做到這一點？TabLayoutPanel將標籤右對齊

2010-06-05 klusark

-1

這是可能的，並且將是非常容易的，如果你創建自己的標籤。只需創建一個標籤形狀的png圖像（這是在頂部圓角）。寫一個css規則。取一個FlextTable並將該CSS應用於每個單元格將成爲您的選項卡，然後將該FlexTable添加到另一個mainTable中。因此，在第一行的mainTable中，將會有tabFlexTable和第二行，無論您想在選擇特定選項卡後顯示什麼內容，都可以在第一行應用水平對齊。這種方式和方式我也用於我的專業項目。

來源

2010-06-06 10:08:35 Rupeshit

短回答 -

我在GWT 2.3和AFAIK上鑽取了源代碼，它比TabBar和StackLayoutPanel更容易構建您自己的複合材料，而不是開始對抗此實現。

只是爲了節省您的努力，它也不能輕鬆居中。對不起，它是這樣的。

這一切的硬編碼...

private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384; 
private final FlowPanel tabBar = new FlowPanel(); 
... 
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);

來源

2011-06-25 23:51:03

共同的想法：

組標籤容器寬度的預定義的「16384px」，而不是「自動」
集「浮動：權利」的CSS財產到最後一個選項卡

將最後一個選項卡移動到firts位置

public void onModuleLoad() { 
     ..... 
     // init TabLayoutPanel 
     ..... 
     Widget rightTab = tabPanel.getTabWidget(0).getParent(); 
     DOM.setStyleAttribute(rightTab.getElement(), "float", "right"); 
     Widget tabBar = rightTab.getParent(); 
     tabBar.setWidth("auto"); 
     tabPanel.selectTab(1); 
}

來源

2011-10-04 08:51:35 azabaluev

爲什麼不是純粹的CSS解決方案？將代碼與設計分開是很好的做法。

.gwt-TabLayoutPanelTabs { 
    width: auto!important; 
} 
.gwt-TabLayoutPanelTab { 
    float: right; 
}

請記住，你的標籤會以相反的順序（先加入將右一）

來源

2013-03-09 13:37:23 Daimonion

如果要對齊所有標籤向右試試這個：

.gwt-TabBar .gwt-TabBarFirst { 
    width: 100%; 
} 

.gwt-TabBar .gwt-TabBarRest { 
    width: 4px; 
} 

.gwt-TabBar .gwt-TabBarFirst-wrapper { 
    width: 100%; 
}

來源

2013-04-03 06:51:29 paulek

謝謝。這對我工作.. :)。但我的主頁中有兩個標籤面板。我希望一個應該對齊，但第二個應該對齊默認（左）。這是可能的，因爲gwt對每個組件都有自己的CSS元素？ – 2015-05-30 03:18:15

TabLayoutPanel將標籤右對齊

回答

相關問題