Package com.vaadin.flow.component.accordion

Class Accordion

  • All Implemented Interfaces:
    AttachNotifier, DetachNotifier, HasElement, HasSize, HasStyle, Serializable
    @Tag("vaadin-accordion")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.3.2") @NpmPackage(value="@vaadin/accordion",version="23.3.2") @NpmPackage(value="@vaadin/vaadin-accordion",version="23.3.2")
@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:
    Serialized Form

    • Constructor Detail

      • Accordion

        public Accordion()

    • Method Detail

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