TabLayoutPanel выровнять вкладку вправо

Question

Я использую TabLayoutPanel в GWT, и я хочу, чтобы последняя вкладка отображалась в правой части страницы. Возможно ли это сделать?

Answer 1

Общая идея:

1. установить ширину контейнера вкладки в "auto" вместо предопределенного "16384px"
2. установить свойство "float: right" css для последней вкладки

3. переместить последнюю вкладку в первую позицию

   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);
   }
   

Answer 2

Если вы хотите выровнять все вкладки по правому краю, попробуйте это:

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

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

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

Answer 3

Почему не чистый CSS раствор? Хорошей практикой является отделение вашего кода от дизайна.

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

Помните, что ваши вкладки будут располагаться в обратном порядке (первое добавленное будет первым справа)

Answer 4

Короткий ответ - НЕТ.

Я рассказал об источнике на 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);

Answer 5

Это возможно и будет очень легко, если вы создадите свою собственную вкладку. Просто создайте png-изображение формы вкладки (с закругленным углом вверху). Напишите одно правило css. Выберите одну таблицу FlextTable и примените эту CSS к каждому ячейка, которая будет вашими вкладками, а затем добавить этот FlexTable в другой mainTable. Таким образом, в вашем mainTable в первом ряду будет tabFlexTable, а во втором ряду все, что вы хотите отобразить после выбора конкретной вкладки. Так что для первого ряда примените горизонтальное выравнивание вправо. Так и я использую в своих профессиональных проектах.