Я хотел бы знать, возможно ли иметь TabLayoutPanel в самом низу страницы в GWT, к сожалению, в Интернете так мало документации.
TabLayoutPanel внизу страницы в GWT
Ответы (2)
Да, это возможно. Самый простой способ — использовать регион DockLayoutPanel. Вы должны обернуть TabLayoutPanel в другой LayoutPanel, чтобы убедиться, что ваш контент будет отображаться правильно, в противном случае вы должны добавить высоту в свой TabLayoutPanel. Я набрал это по памяти, но синтаксис должен быть правильным.
<DockLayoutPanel unit="PX">
<g:south size="200">
<g:TabLayoutPanel barHeight="30" barUnit="PX">
<g:tab>
<g:header>Tab 1</g:header>
<g:Label> Tab 1 content</g:Label>
</g:tab>
<g:tab>
<g:header>Tab 2</g:header>
<g:Label>Tab 2 content</g:Label>
</g:tab>
</g:TabLayoutPanel>
</g:south>
<g:center>
<g:FlowPanel>
<g:Label>Main page content</g:Label>
</g:FlowPanel>
<g:center>
</DockLayoutPanel>
person
Chris Hinshaw
schedule
31.07.2012
Не очень элегантно, но работает:
public class BottomLabLayoutPanel extends TabLayoutPanel
{
public BottomLabLayoutPanel(double barHeight, Unit barUnit)
{
super(barHeight, barUnit);
LayoutPanel panel = (LayoutPanel)getWidget();
if (panel.getWidgetCount() >= 2)
{
Widget w1 = panel.getWidget(0);
Widget w2 = panel.getWidget(1);
Element e1 = w1.getElement().getParentElement();
Element e2 = w2.getElement().getParentElement();
if (e1 != null)
e1.setClassName("BottomTabLayoutPanel TabPanel");
if (e2 != null)
e2.setClassName("BottomTabLayoutPanel ContentPanel");
}
}
}
В CSS:
.BottomTabLayoutPanel.TabPanel
{
top: auto !important;
bottom: 0px !important;
}
.BottomTabLayoutPanel.ContentPanel
{
top: 0px !important;
margin-bottom: 35px !important;
}
person
ochakov
schedule
17.04.2014