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/accordion", version="25.3.0-alpha12") @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.

Since:
1.0
Author:
Vaadin Ltd
See Also:

  • Constructor Details

    • Accordion

      public Accordion()
      Initializes a new Accordion component.

  • 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.

    • getHeadingLevel

      public Integer getHeadingLevel()
      Gets the ARIA heading level applied to the panel headings.
      Returns:
      the heading level, or null if none is set
      Since:
      25.3

    • setHeadingLevel

      public void setHeadingLevel(Integer headingLevel)
      Sets the ARIA heading level for the panel headings, exposing them at the level that matches the surrounding page structure. This sets the aria-level attribute on each panel heading.

      By default no heading level is set and screen readers announce the headings using their default level. Set to null to restore the default.

      Parameters:
      headingLevel - the heading level, or null to remove it
      Since:
      25.3

    • 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.