Vaadin Web应用开发教程(35):UI布局-Accordion布局

Accordion布局类似TabSheet，不过是以垂直方式安排多个标签页，其使用方法也和TabSheet布局类似。

[java] 
// Create the Accordion.  
Accordion accordion = new Accordion(); 
  
// Have it take all space available in the layout.  
accordion.setSizeFull(); 
  
// Some components to put in the Accordion.  
Label l1 = new Label("There are no previously saved actions."); 
Label l2 = new Label("There are no saved notes."); 
Label l3 = new Label("There are currently no issues."); 
  
// Add the components as tabs in the Accordion.  
accordion.addTab(l1, "Saved actions", null); 
accordion.addTab(l2, "Notes", null); 
accordion.addTab(l3, "Issues", null); 
  
// A container for the Accordion.  
Panel panel = new Panel("Tasks"); 
panel.setWidth("300px"); 
panel.setHeight("300px"); 
panel.addComponent(accordion); 
  
// Trim its layout to allow the Accordion take all space.  
panel.getLayout().setSizeFull(); 
panel.getLayout().setMargin(false); 

// Create the Accordion.
Accordion accordion = new Accordion();
 
// Have it take all space available in the layout.
accordion.setSizeFull();
 
// Some components to put in the Accordion.
Label l1 = new Label("There are no previously saved actions.");
Label l2 = new Label("There are no saved notes.");
Label l3 = new Label("There are currently no issues.");
 
// Add the components as tabs in the Accordion.
accordion.addTab(l1, "Saved actions", null);
accordion.addTab(l2, "Notes", null);
accordion.addTab(l3, "Issues", null);
 
// A container for the Accordion.
Panel panel = new Panel("Tasks");
panel.setWidth("300px");
panel.setHeight("300px");
panel.addComponent(accordion);
 
// Trim its layout to allow the Accordion take all space.
panel.getLayout().setSizeFull();
panel.getLayout().setMargin(false);

补充：Web开发 , 其他 ,

上一个：关于struts2页面传值取值方式
下一个：Vaadin Web应用开发教程(34):UI布局-TabSheet布局