Package com.vaadin.flow.component.accordion

Class Accordion

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.accordion.Accordion
All Implemented Interfaces:
AttachNotifier, DetachNotifier, HasElement, HasSize, HasStyle, Serializable
@Tag("vaadin-accordion") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.0.12") @NpmPackage(value="@vaadin/accordion",version="24.0.12") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/accordion/src/vaadin-accordion.js") public class Accordion extends Component implements HasSize, 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:

  • Constructor Details

    • Accordion

      public Accordion()

  • Method Details

    • add

      public AccordionPanel add(String summary, 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(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 Registration addOpenedChangeListener(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.