Package com.vaadin.componentfactory

Class AnchorNav

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.HtmlComponent
com.vaadin.flow.component.HtmlContainer
com.vaadin.componentfactory.AnchorNav
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasComponents, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasEnabled, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.component.HasText, com.vaadin.flow.component.HasTheme, Serializable
@Tag("vcf-anchor-nav") @NpmPackage(value="@vaadin-component-factory/vcf-anchor-nav", version="4.0.0") @JsModule("@vaadin-component-factory/vcf-anchor-nav") public class AnchorNav extends com.vaadin.flow.component.HtmlContainer implements com.vaadin.flow.component.HasTheme
Server-side component for the vcf-anchor-nav element.
Author:
Vaadin Ltd
See Also:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static class 
    AnchorNav.SelectedSectionChangedEvent
     

    Nested classes/interfaces inherited from interface com.vaadin.flow.component.HasText

    com.vaadin.flow.component.HasText.WhiteSpace

  • Constructor Summary

    Constructors
    Constructor
    Description
    AnchorNav()
     
    AnchorNav(boolean noHistory)
     

  • Method Summary

    Modifier and Type
    Method
    Description
    com.vaadin.flow.shared.Registration
    addRealignOnEvent(String eventName)
    Registers a listener that re-aligns the view to the currently selected section (see scrollToSelectedSection()) whenever a DOM event with the given name is fired on, or bubbles up to, this component.
    AnchorNavSection
    addSection(com.vaadin.flow.component.tabs.Tab sectionTab, com.vaadin.flow.component.Component... components)
    Adds a section created from the given Tab and content.
    AnchorNavSection
    addSection(String title, com.vaadin.flow.component.Component... components)
    Adds a section created from the given title and content.
    com.vaadin.flow.shared.Registration
    addSelectedSectionChangedListener(com.vaadin.flow.component.ComponentEventListener<AnchorNav.SelectedSectionChangedEvent> listener)
    Adds a listener for AnchorNav.SelectedSectionChangedEvent.
    void
    addThemeVariants(AnchorNavVariant... variants)
    Adds theme variants to the component.
    void
    scrollToSection(int sectionIndex)
    Scrolls the section with the given zero-based index to the top of the navigation area without changing which tab is selected.
    void
    scrollToSection(AnchorNavSection section)
    Scrolls the given section to the top of the navigation area without changing which tab is selected.
    void
    scrollToSelectedSection()
    Re-scrolls to the section most recently selected with setSelectedSection(int) or setSelectedSection(AnchorNavSection).
    void
    setHeader(com.vaadin.flow.component.Component header)
    Sets the component header
    void
    setHeaderText(String headerText)
    Set the header text as a html h2 title
    void
    setNoHistory(boolean noHistory)
    Toggles "no history" mode for the anchor.
    void
    setSelectedSection(int selectedIndex)
    Selects a section based on its zero-based index.
    void
    setSelectedSection(AnchorNavSection selectedSection)
    Selects the given section.

    Methods inherited from class com.vaadin.flow.component.HtmlComponent

    getTitle, setTitle

    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, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setVisible

    Methods inherited from class java.lang.Object

    clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

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

    add, add, add, addComponentAsFirst, addComponentAtIndex, remove, remove, removeAll

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

    getElement

    Methods inherited from interface com.vaadin.flow.component.HasEnabled

    isEnabled, setEnabled

    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

    Methods inherited from interface com.vaadin.flow.component.HasText

    getText, getWhiteSpace, setText, setWhiteSpace

    Methods inherited from interface com.vaadin.flow.component.HasTheme

    addThemeName, addThemeNames, getThemeName, getThemeNames, hasThemeName, removeThemeName, removeThemeNames, setThemeName, setThemeName

  • Constructor Details

    • AnchorNav

      public AnchorNav()

    • AnchorNav

      public AnchorNav(boolean noHistory)

  • Method Details

    • setNoHistory

      public void setNoHistory(boolean noHistory)
      Toggles "no history" mode for the anchor. Setting the property for a single AnchorNav enabled "no history" mode for the entire view.
      Parameters:
      noHistory -

    • addSection

      public AnchorNavSection addSection(String title, com.vaadin.flow.component.Component... components)
      Adds a section created from the given title and content.
      Parameters:
      title - title of the section
      components - content
      Returns:
      the section

    • addSection

      public AnchorNavSection addSection(com.vaadin.flow.component.tabs.Tab sectionTab, com.vaadin.flow.component.Component... components)
      Adds a section created from the given Tab and content.
      Parameters:
      sectionTab - Tab of the section
      components - content
      Returns:
      the section

    • setHeaderText

      public void setHeaderText(String headerText)
      Set the header text as a html h2 title
      Parameters:
      headerText - text of the header

    • setHeader

      public void setHeader(com.vaadin.flow.component.Component header)
      Sets the component header
      Parameters:
      header - component to add as a header

    • addThemeVariants

      public void addThemeVariants(AnchorNavVariant... variants)
      Adds theme variants to the component.
      Parameters:
      variants - theme variants to add

    • setSelectedSection

      public void setSelectedSection(int selectedIndex)
      Selects a section based on its zero-based index.
      Parameters:
      selectedIndex - the zero-based index of the selected section

    • scrollToSection

      public void scrollToSection(AnchorNavSection section)
      Scrolls the given section to the top of the navigation area without changing which tab is selected.

      This is the recommended way to re-align after content above the target has finished loading or resizing. A section's scroll position is an absolute pixel offset computed when setSelectedSection(int) runs; if content above it then changes height (for example lazy-loaded grids or images), that offset becomes stale and the view ends up at the wrong section. Call this once the content has settled - typically from a listener on a "content loaded" event fired by your loading logic - to correct the alignment deterministically: 

       AnchorNavSection details = anchorNav.addSection("Details", ...);
 anchorNav.setSelectedSection(details);
 // when the lazy-loaded content reports it is ready:
 anchorNav.scrollToSection(details);
      Parameters:
      section - the section to scroll to, not null
      Throws:
      IllegalArgumentException - if section is not a child of this component

    • scrollToSection

      public void scrollToSection(int sectionIndex)
      Scrolls the section with the given zero-based index to the top of the navigation area without changing which tab is selected. See scrollToSection(AnchorNavSection) for when and why to use this.
      Parameters:
      sectionIndex - the zero-based index of the section to scroll to

    • scrollToSelectedSection

      public void scrollToSelectedSection()
      Re-scrolls to the section most recently selected with setSelectedSection(int) or setSelectedSection(AnchorNavSection).

      Convenience for the common case where you want to re-align to the programmatically selected section without keeping a reference to it - for example from a "content loaded" listener after lazy-loaded content above it has settled. Equivalent to calling scrollToSection(int) with the last selected index. Has no effect if no section has been selected programmatically yet.

    • addRealignOnEvent

      public com.vaadin.flow.shared.Registration addRealignOnEvent(String eventName)
      Registers a listener that re-aligns the view to the currently selected section (see scrollToSelectedSection()) whenever a DOM event with the given name is fired on, or bubbles up to, this component.

      This is the recommended way to correct the scroll position after content above the selected section finishes loading or resizing, without having to wire a listener through Component.getElement() yourself: have your loading logic dispatch a (bubbling) DOM event once the content has settled, and pass its name here. 

       anchorNav.setSelectedSection(details);
 anchorNav.addRealignOnEvent("content-loaded");
 // on the client, once lazy loading is done, e.g.:
 // grid.dispatchEvent(new CustomEvent('content-loaded', { bubbles: true }));
      Parameters:
      eventName - the name of the DOM event that signals content is ready, not null
      Returns:
      a registration for removing the listener

    • setSelectedSection

      public void setSelectedSection(AnchorNavSection selectedSection)
      Selects the given section.
      Parameters:
      selectedSection - the section to select, not null
      Throws:
      IllegalArgumentException - if selectedSection is not a child of this component

    • addSelectedSectionChangedListener

      public com.vaadin.flow.shared.Registration addSelectedSectionChangedListener(com.vaadin.flow.component.ComponentEventListener<AnchorNav.SelectedSectionChangedEvent> listener)
      Adds a listener for AnchorNav.SelectedSectionChangedEvent.
      Parameters:
      listener - the listener to add, not null
      Returns:
      a handle that can be used for removing the listener