Vaadin Web应用开发教程(35):UI布局-Accordion布局
2012-08-29 06:50
435 查看
Accordion布局类似TabSheet,不过是以垂直方式安排多个标签页,其使用方法也和TabSheet布局类似。
// 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);
相关文章推荐
- Vaadin Web应用开发教程(33):UI布局-HorizontalSplitPanel和VerticalSplitPanel布局
- Vaadin Web应用开发教程(31):UI布局-FormLayout布局
- Vaadin Web应用开发教程(32):UI布局-Panel
- Vaadin Web应用开发教程(36):UI布局-AbsoluteLayout 布局
- Vaadin Web应用开发教程(29):UI布局-VerticalLayout和HorizontalLayout布局
- Vaadin Web应用开发教程(30):UI布局-GridLayout布局
- Vaadin Web应用开发教程(34):UI布局-TabSheet布局
- Vaadin Web应用开发教程(39):使用主题-CSS简介
- Vaadin Web应用开发教程(16):UI组件-Checkbox
- Vaadin Web应用开发教程(42):数据绑定-Property接口
- Vaadin Web应用开发教程(19):UI组件-Tree 组件
- Vaadin Web应用开发教程(20):UI组件-MenuBar组件
- Vaadin Web应用开发教程(1):概述
- Vaadin Web应用开发教程(10):UI组件-TextField
- Vaadin Web应用开发教程(14):UI组件-DateField
- Vaadin Web应用开发教程(24):UI组件-ProgressIndicator组件
- Vaadin Web应用开发教程(6):使用资源
- Vaadin Web应用开发教程(9):UI组件-Link
- Vaadin Web应用开发教程(41):数据绑定-概述
- Vaadin Web应用开发教程(25):UI组件-Slider组件