Class Accordion

  • All Implemented Interfaces:
    com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, Serializable

    @Tag("vaadin-accordion")
    @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.6.2") @NpmPackage(value="@vaadin/accordion",version="23.6.2") @NpmPackage(value="@vaadin/vaadin-accordion",version="23.6.2")
    @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/accordion/src/vaadin-accordion.js")
    public class Accordion
    extends com.vaadin.flow.component.Component
    implements com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle
    Accordion is a vertically stacked set of expandable panels. It reduces clutter and helps maintain the user’s focus by showing only the relevant content at a time.

    Accordion consists of stacked panels, each composed of two parts: a summary and a content area. Only one panel can be expanded at a time.

    The summary is the part that is always visible, and typically describes the contents, for example, with a title. Clicking on the summary toggles the content area’s visibility.

    The content area is the collapsible part of a panel. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.

    Author:
    Vaadin Ltd
    See Also:
    Serialized Form
    • Nested Class Summary

      Nested Classes 
      Modifier and Type Class Description
      static class  Accordion.OpenedChangeEvent
      An event fired when an Accordion is opened or closed.
    • Constructor Summary

      Constructors 
      Constructor Description
      Accordion()  
    • Method Summary

      All Methods Instance Methods Concrete Methods 
      Modifier and Type Method Description
      AccordionPanel add​(AccordionPanel panel)
      Adds a panel.
      AccordionPanel add​(String summary, com.vaadin.flow.component.Component content)
      Adds a panel created from the given title and content.
      com.vaadin.flow.shared.Registration addOpenedChangeListener​(com.vaadin.flow.component.ComponentEventListener<Accordion.OpenedChangeEvent> listener)
      Registers a listener to be notified whenever a panel is opened or closed.
      void close()
      Closes the opened panel (if any) in this accordion.
      OptionalInt getOpenedIndex()
      Gets the index of the currently opened index.
      Optional<AccordionPanel> getOpenedPanel()
      Gets the opened panel.
      void open​(int index)
      Opens the panel at the specified index.
      void open​(AccordionPanel panel)
      Opens the specified panel.
      void remove​(AccordionPanel panel)
      Removes a panel.
      void remove​(com.vaadin.flow.component.Component content)
      Removes a panel based on the content
      • Methods inherited from class com.vaadin.flow.component.Component

        addListener, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, scrollIntoView, set, setElement, setId, setVisible
      • Methods inherited from interface com.vaadin.flow.component.AttachNotifier

        addAttachListener
      • Methods inherited from interface com.vaadin.flow.component.DetachNotifier

        addDetachListener
      • Methods inherited from interface com.vaadin.flow.component.HasElement

        getElement
      • Methods inherited from interface com.vaadin.flow.component.HasSize

        getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull
      • Methods inherited from interface com.vaadin.flow.component.HasStyle

        addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName
    • Constructor Detail

      • Accordion

        public Accordion()
    • Method Detail

      • add

        public AccordionPanel add​(String summary,
                                  com.vaadin.flow.component.Component content)
        Adds a panel created from the given title and content.
        Parameters:
        summary - the title of the panel
        content - the content of th panel
        Returns:
        the panel created and added
      • add

        public AccordionPanel add​(AccordionPanel panel)
        Adds a panel.
        Parameters:
        panel - the non-null panel to be added
        Returns:
        the added panel
      • remove

        public void remove​(AccordionPanel panel)
        Removes a panel.
        Parameters:
        panel - the non-null panel to be removed
      • remove

        public void remove​(com.vaadin.flow.component.Component content)
        Removes a panel based on the content
        Parameters:
        content - the non-null content of the panel to be removed
      • close

        public void close()
        Closes the opened panel (if any) in this accordion.
      • open

        public void open​(int index)
        Opens the panel at the specified index.
        Parameters:
        index - the (positive) index of the panel to be open. The first panel is at index zero.
      • open

        public void open​(AccordionPanel panel)
        Opens the specified panel.
        Parameters:
        panel - the non-null panel to be opened
      • getOpenedIndex

        @Synchronize(property="opened",
                     value="opened-changed")
        public OptionalInt getOpenedIndex()
        Gets the index of the currently opened index.
        Returns:
        the index of the opened panel or null if the accordion is closed.
      • getOpenedPanel

        @Synchronize(property="opened",
                     value="opened-changed")
        public Optional<AccordionPanel> getOpenedPanel()
        Gets the opened panel. Caution should be exercised when using this method with an Accordion which along with its panels were created in a template. Such template children would by default not be children of the Accordion Flow component, thus making it possible for this method to return the wrong panel in such cases.
        Returns:
        the opened panel.
      • addOpenedChangeListener

        public com.vaadin.flow.shared.Registration addOpenedChangeListener​(com.vaadin.flow.component.ComponentEventListener<Accordion.OpenedChangeEvent> listener)
        Registers a listener to be notified whenever a panel is opened or closed.
        Parameters:
        listener - the listener to be notified
        Returns:
        a handle to the registered listener which could also be used to unregister it.