vaadin - 使用 Vaadin 隐藏和折叠菜单

Question

有谁知道如何使用 vaadin api 创建隐藏和折叠内容。

Answer 1

所有组件都继承了 setVisible() 方法，该方法可以触发可见性的开启和关闭。这意味着至少所有组件和组件容器。但是，这在没有动画的情况下发生。如果你喜欢一些动画，你必须依赖附加组件，例如 Henrik Paul's Drawer做了某种隐藏和显示动画。

这是你在想的吗？

Answer 2

我通过使用 vaadin 的 TabSheet 功能实现了它。每当用户单击“-”选项卡时，我创建了两个选项卡“+”和“-”，它将 TabSheet 高度设置为 100%，并且每当用户单击“+”选项卡时，我我将 TabSheet 的高度设置为 20%（tabsheet 的可见高度），因此无论 TabSheet 中的内容如何，​​都将隐藏在用户视角中。

     // Create an empty tab sheet.
    TabSheet tabsheet = new TabSheet();


    // Defining Vertical Layout for Tab 1 content
    final VerticalLayout verLayout1 = new VerticalLayout();


       // Tab 2 content
    VerticalLayout verLayout2 = new VerticalLayout();
    verLayout2.setSizeUndefined();
    verLayout2.setMargin(true);

    tabsheet.addTab(verLayout1, "+", null);
    tabsheet.addTab(verLayout2, "-", null);
    tabsheet.addListener(listenerForTab());




      /**
   * Method to handle tab sheet hide/show event
   * 
   * @return TabSheet.SelectedTabChangeListener
   */
  public TabSheet.SelectedTabChangeListener listenerForTab() {
    _logger.info("Entering in to tabChangeListener of WizardUtil");
    // Instance of TabSheet.SelectedTabChangeListener
    TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
      public void selectedTabChange(SelectedTabChangeEvent event) {
        TabSheet tabsheet = event.getTabSheet();
        Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
        // Tab content displayed on setting height to the tab sheet
        if(tab.getCaption().equals("+")) {
          tabsheet.setHeight("100%");
        } else {
          tabsheet.setHeight("33px");
        }
      }
    };
    _logger.info("Exiting from tabChangeListener of WizardUtil");
    return listener;
  }