Package com.vaadin.flow.component.tabs

Class Tabs

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.tabs.Tabs
All Implemented Interfaces:
AttachNotifier, DetachNotifier, HasElement, HasEnabled, HasSize, HasStyle, HasTheme, HasThemeVariant<TabsVariant>, Serializable
@Tag("vaadin-tabs") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.0.0") @NpmPackage(value="@vaadin/tabs",version="24.0.0") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/tabs/src/vaadin-tabs.js") public class Tabs extends Component implements HasEnabled, HasSize, HasStyle, HasThemeVariant<TabsVariant>
Tabs are used to organize and group content into sections that the user can navigate between. Use Tabs when you want to allow in-place navigation within a certain part of the UI, instead of showing everything at once or forcing the user to navigate between different views.

Tab components can be added to this component with the add(Tab...) method or the Tabs(Tab...) constructor. The Tab components added to it can be selected with the setSelectedIndex(int) or setSelectedTab(Tab) methods. The first added Tab component will be automatically selected, firing a Tabs.SelectedChangeEvent, unless autoselection is explicitly disabled with Tabs(boolean, Tab...), or setAutoselect(boolean). Removing the selected tab from the component changes the selection to the next available tab.

Note: Adding or removing Tab components via the Element API, eg. tabs.getElement().insertChild(0, tab.getElement()); , doesn't update the selected index, so it may cause the selected tab to change unexpectedly.

Author:
Vaadin Ltd.
See Also:

  • Constructor Details

    • Tabs

      public Tabs()
      Constructs an empty new object with HORIZONTAL orientation.

    • Tabs

      public Tabs(Tab... tabs)
      Constructs a new object enclosing the given tabs, with HORIZONTAL orientation.

      The first added Tab component will be automatically selected. Any selection change listener added afterwards will not be notified about the auto-selected tab.

      Parameters:
      tabs - the tabs to enclose

    • Tabs

      public Tabs(boolean autoselect, Tab... tabs)
      Constructs a new object enclosing the given autoselect option and tabs, with HORIZONTAL orientation.

      Unless auto-select is disabled, the first added Tab component will be automatically selected. Any selection change listener added afterwards will not be notified about the auto-selected tab.

      Parameters:
      autoselect - true to automatically select the first added tab, false to leave tabs unselected
      tabs - the tabs to enclose

  • Method Details

    • add

      @Deprecated public void add(Component... components)
      Deprecated.
      since 24.0, use add(Tab...) instead.
      Adds the given tabs to the component.

      The first added Tab component will be automatically selected, unless auto-selection is explicitly disabled with Tabs(boolean, Tab...), or setAutoselect(boolean). If a selection change listener has been added before adding the tabs, it will be notified with the auto-selected tab.

      Parameters:
      components - the tabs to enclose

    • add

      public void add(Tab... tabs)
      Adds the given tabs to the component.

      The first added Tab component will be automatically selected, unless auto-selection is explicitly disabled with Tabs(boolean, Tab...), or setAutoselect(boolean). If a selection change listener has been added before adding the tabs, it will be notified with the auto-selected tab.

      Parameters:
      tabs - the tabs to enclose

    • remove

      @Deprecated public void remove(Component... components)
      Deprecated.
      since 24.0, use remove(Tab...) instead.
      Removes the given child tabs from this component.
      Parameters:
      components - the tabs to remove
      Throws:
      IllegalArgumentException - if there is a tab whose non null parent is not this component

      Removing tabs before the selected tab will decrease the selected index to avoid changing the selected tab. Removing the selected tab will select the next available tab if autoselect is true, otherwise no tab will be selected.

    • remove

      public void remove(Tab... tabs)
      Removes the given child tabs from this component.
      Parameters:
      tabs - the tabs to remove
      Throws:
      IllegalArgumentException - if there is a tab whose non null parent is not this component

      Removing tabs before the selected tab will decrease the selected index to avoid changing the selected tab. Removing the selected tab will select the next available tab if autoselect is true, otherwise no tab will be selected.

    • removeAll

      public void removeAll()
      Removes all tabs from this component. It also removes the children that were added only at the client-side.

      This will reset the selected index to zero.

    • addComponentAtIndex

      @Deprecated public void addComponentAtIndex(int index, Component component)
      Deprecated.
      since 24.0, use addTabAtIndex(int, Tab) instead.
      Adds the given tab as child of this tab at the specific index.

      In case the specified tab has already been added to another parent, it will be removed from there and added to this one.

      Parameters:
      index - the index, where the tab will be added. The index must be non-negative and may not exceed the children count
      component - the tab to add, value should not be null

      Adding a tab before the currently selected tab will increment the selected index to avoid changing the selected tab.

    • addTabAtIndex

      public void addTabAtIndex(int index, Tab tab)
      Adds the given tab as child of this tab at the specific index.

      In case the specified tab has already been added to another parent, it will be removed from there and added to this one.

      Parameters:
      index - the index, where the tab will be added. The index must be non-negative and may not exceed the children count
      tab - the tab to add, value should not be null

      Adding a tab before the currently selected tab will increment the selected index to avoid changing the selected tab.

    • replace

      @Deprecated public void replace(Component oldComponent, Component newComponent)
      Deprecated.
      since 24.0, use replace(Tab, Tab) instead.
      Replaces the tab in the container with another one without changing position. This method replaces tab with another one is such way that the new tab overtakes the position of the old tab. If the old tab is not in the container, the new tab is added to the container. If the both tabs are already in the container, their positions are swapped. Tab attach and detach events should be taken care as with add and remove.
      Parameters:
      oldComponent - the old tab that will be replaced. Can be null, which will make the newTab to be added to the layout without replacing any other
      newComponent - the new tab to be replaced. Can be null, which will make the oldTab to be removed from the layout without adding any other

      Replacing the currently selected tab will make the new tab selected.

    • replace

      public void replace(Tab oldTab, Tab newTab)
      Replaces the tab in the container with another one without changing position. This method replaces tab with another one is such way that the new tab overtakes the position of the old tab. If the old tab is not in the container, the new tab is added to the container. If the both tabs are already in the container, their positions are swapped. Tab attach and detach events should be taken care as with add and remove.
      Parameters:
      oldTab - the old tab that will be replaced. Can be null, which will make the newTab to be added to the layout without replacing any other
      newTab - the new tab to be replaced. Can be null, which will make the oldTab to be removed from the layout without adding any other

      Replacing the currently selected tab will make the new tab selected.

    • onAttach

      protected void onAttach(AttachEvent attachEvent)
      Description copied from class: Component
      Called when the component is attached to a UI.

      The default implementation does nothing.

      This method is invoked before the AttachEvent is fired for the component.

      Overrides:
      onAttach in class Component
      Parameters:
      attachEvent - the attach event

    • addSelectedChangeListener

      public Registration addSelectedChangeListener(ComponentEventListener<Tabs.SelectedChangeEvent> listener)
      Adds a listener for Tabs.SelectedChangeEvent.
      Parameters:
      listener - the listener to add, not null
      Returns:
      a handle that can be used for removing the listener

    • getSelectedIndex

      @Synchronize(property="selected", value="selected-changed") public int getSelectedIndex()
      Gets the zero-based index of the currently selected tab.
      Returns:
      the zero-based index of the selected tab, or -1 if none of the tabs is selected

    • setSelectedIndex

      public void setSelectedIndex(int selectedIndex)
      Selects a tab based on its zero-based index.
      Parameters:
      selectedIndex - the zero-based index of the selected tab, -1 to unselect all

    • getSelectedTab

      public Tab getSelectedTab()
      Gets the currently selected tab.
      Returns:
      the selected tab, or null if none is selected

    • setSelectedTab

      public void setSelectedTab(Tab selectedTab)
      Selects the given tab.
      Parameters:
      selectedTab - the tab to select, null to unselect all
      Throws:
      IllegalArgumentException - if selectedTab is not a child of this component

    • getOrientation

      public Tabs.Orientation getOrientation()
      Gets the orientation of this tab sheet.
      Returns:
      the orientation

    • setOrientation

      public void setOrientation(Tabs.Orientation orientation)
      Sets the orientation of this tab sheet.
      Parameters:
      orientation - the orientation

    • setFlexGrowForEnclosedTabs

      public void setFlexGrowForEnclosedTabs(double flexGrow)
      Sets the flex grow property of all enclosed tabs. The flex grow property specifies what amount of the available space inside the layout the component should take up, proportionally to the other components.

      For example, if all components have a flex grow property value set to 1, the remaining space in the layout will be distributed equally to all components inside the layout. If you set a flex grow property of one component to 2, that component will take twice the available space as the other components, and so on.

      Setting to flex grow property value 0 disables the expansion of the component. Negative values are not allowed.

      Parameters:
      flexGrow - the proportion of the available space the enclosed tabs should take up
      Throws:
      IllegalArgumentException - if flexGrow is negative

    • setAutoselect

      public void setAutoselect(boolean autoselect)
      Specify that the tabs should be automatically selected. When autoselect is false, no tab will be selected when the component load and it will not select any others tab when removing currently selected tab. The default value is true.
      Parameters:
      autoselect - true to autoselect tab, false to not.

    • isAutoselect

      public boolean isAutoselect()
      Gets whether the tabs should be automatically selected. The default value is true.
      Returns:
      true if autoselect is active, false otherwise
      See Also:

    • indexOf

      @Deprecated public int indexOf(Component component)
      Deprecated.
      since 24.0, use indexOf(Tab) instead.
      Returns the index of the given tab.
      Parameters:
      component - the tab to look up, can not be null
      Returns:
      the index of the tab or -1 if the tab is not a child

    • indexOf

      public int indexOf(Tab tab)
      Returns the index of the given tab.
      Parameters:
      tab - the tab to look up, can not be null
      Returns:
      the index of the tab or -1 if the tab is not a child

    • getComponentCount

      public int getComponentCount()
      Gets the number of children tabs.
      Returns:
      the number of tabs

    • getComponentAt

      @Deprecated public Component getComponentAt(int index)
      Deprecated.
      since 24.0, use getTabAt(int) instead.
      Returns the tab at the given position.
      Parameters:
      index - the position of the tab, must be greater than or equals to 0 and less than the number of children tabs
      Returns:
      The tab at the given index
      Throws:
      IllegalArgumentException - if the index is less than 0 or greater than or equals to the number of children tabs

    • getTabAt

      public Tab getTabAt(int index)
      Returns the tab at the given position.
      Parameters:
      index - the position of the tab, must be greater than or equals to 0 and less than the number of children tabs
      Returns:
      The tab at the given index
      Throws:
      IllegalArgumentException - if the index is less than 0 or greater than or equals to the number of children tabs

    • addComponentAsFirst

      @Deprecated public void addComponentAsFirst(Component component)
      Deprecated.
      since 24.0, use addTabAsFirst(Tab) instead.
      Adds the given tab as the first child of this component.

      In case the specified tab has already been added to another parent, it will be removed from there and added to this one.

      Parameters:
      component - the tab to add, value should not be null

    • addTabAsFirst

      public void addTabAsFirst(Tab tab)
      Adds the given tab as the first child of this component.

      In case the specified tab has already been added to another parent, it will be removed from there and added to this one.

      Parameters:
      tab - the tab to add, value should not be null