Question

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

Answer 1

所有组件都继承setVisible（）方法，该方法可以启用和关闭可见性。这至少意味着所有组件和组件容器。但是，没有动画就会发生这种情况。如果您喜欢某些动画，则必须依赖附加组件，例如亨利克·保罗的Drawer做了某种隐藏和动画制作。

这是你在想什么？

Answer 2

我通过使用vaadin的TabSheet功能实现了它。当用户点击' - '选项卡时，我创建了两个标签'+'和' - '它将TabSheet高度设置为100％，并且每当用户点击'+'时'选项卡我将TabSheet的高度设置为20％（标签页的可见高度），因此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;
  }

使用Vaadin隐藏和折叠菜单

2 个答案: