GWT Вертикальные вкладки, такие как iGoogle

Question

Я использую GWT и хотел бы создать вертикальную панель вкладок, как в iGoogle.

Как этого можно достичь?

Answer 1

У меня была такая же проблема, и я решил не использовать стороннюю библиотеку только для одного маленького виджета. Вот легковесное решение, которое я в итоге использовал - оно основано на стилях настройки.

verticaltabpanel.css:

@external gwt-TabLayoutPanel;
.gwt-TabLayoutPanel>div {
    position: static !important;
}
.gwt-TabLayoutPanel {
    margin-left: 30px;
}
@external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
    top: 0 !important;
    width: 140px !important;
}
@external gwt-TabLayoutPanelTab;
.gwt-TabLayoutPanelTab {
    display: block !important;
    margin-top: 2px;
    padding: 8px 6px !important; 
}
@external gwt-TabLayoutPanelContentContainer;
.gwt-TabLayoutPanelContentContainer {
    left: 150px !important;
    top: 0 !important;
}

Добавьте это к ресурсам как обычно:

public interface YouAppResources extends ClientBundle {

    @Source("verticaltabpanel.css")
    CssResource verticalTabPanelStyles();
}

Затем введите его при запуске приложения:

resources.verticalTabPanelStyles().ensureInjected();

Определите панель вкладок в шаблонах следующим образом:

<ui:style>
    .tabPanel {
        height: 400px;
        width: 800px;
    }
</ui:style>
<g:TabLayoutPanel addStyleNames="{style.tabPanel}" barUnit='PX' barHeight='0'>
</g:TabLayoutPanel>

Обратите внимание, что вы должны установить высоту и ширину, а стиль должен быть добавлен, но не установлен.

Недостатком этого подхода является то, что все панели вкладок в вашем приложении теперь будут вертикальными. Если вам нужен горизонтальный, вы можете использовать старый TabPanel (обратите внимание, что он устарел). Это хорошо для моего случая, так как у меня есть несколько вертикальных панелей вкладок в моем приложении и только одна горизонтальная.

Answer 2

вы можете использовать вертикальные вкладки ext-js - посмотрите эту демонстрацию http://iamtotti.com/playground/js/ext-3.1.1/examples/tabs/tabs.html

есть порт ext-js gwt, который вы можете использовать: http://code.google.com/p/gwt-ext/

Smart gwt также имеет вертикальную реализацию табуляции (отличается от gwt-ext) - http://www.smartclient.com/smartgwt/showcase и выполняет поиск ориентации в левом меню.

Answer 3

спасибо за ваш ответ, мегас.

Одно расширение, позволяющее использовать некоторые панели TabLayout с горизонтальным (оригинальным) и некоторые с вертикальным (новым) макетом: можно добавить идентификаторы (например, #myVertTab) вселекторы css.

Answer 4

Я думаю, что вы ищете TabLayoutPanel (прокрутите немного вниз). Он отлично работает, и это ванильный виджет GWT, сторонних библиотек не требуется.