Tabs Unlimited for Oxygen

Let me introduce you to my new tabs component for Oxygen Builder. With this system, you can create any type of tabs with any design you imagine. Truly, your imagination is the limit!

Usage Instructions:

This component consists of two main elements within Oxygen Builder:

1. Tabs Buttons (.x-tabs-buttons):
   This container holds the divs used as buttons.

2. Tabs Contents (.x-tabs-contents):
   This is where all the content corresponding to the buttons will go. Ensure the number of buttons matches the number of content sections (e.g., 2 buttons = 2 content sections).

Key Attributes of the Tabs Contents Element:

• data-tabs-selector:
  This attribute specifies the container for the buttons. It must always reference the .x-tabs-buttons element:

  • "prev": Selects the previous .x-tabs-buttons.
  • "next": Selects the next .x-tabs-buttons.
  • "both": Selects both previous and next .x-tabs-buttons.
    You can also use custom selectors with IDs (#my-id-selector) or classes (.my-class-selector). Multiple selectors can be combined with commas. Always ensure the selector points to a .x-tabs-buttons div.

• data-tabs-active:
  Specifies which tab will be active by default.

  • For example, set 3 to make the third tab active initially.
  • Defaults to the first tab (1).

• data-tabs-transition-duration:
  Sets the duration of the transition between tabs.

  • Defaults to 0.3s, but you can adjust it, e.g., to 1s for longer transitions or 0.1s for faster ones.

• data-tabs-multiple:
  Determines whether the Tabs Buttons operate in sync (false, default) or independently (true).

• data-tabs-arrow-next and data-tabs-arrow-prev:
  Defines custom selectors for navigation buttons (next and previous). Use IDs (#next-button) or classes (.prev-arrow).

• data-tabs-arrows-type:
  Configures the behavior of navigation buttons:

  • "static" (default): Stops at the first or last tab.
  • "infinite": Loops back to the first tab after the last.
  • "autoplay": Tabs change automatically.

• data-tabs-arrows-duration:
  Sets the autoplay interval in milliseconds (default is 1000 = 1 second).

• data-tabs-sticky-mobile:
  Activates or deactivates automatic scroll adjustment on mobile devices when a tab is selected.

  • If true, the scroll adjusts to make the active tab visible at the top of the screen.
  • Defaults to false.

• data-tabs-sticky-mobile-top:
  Specifies the distance from the top of the screen for the scroll adjustment (used only if data-tabs-sticky-mobile is true).

  • Accepts values like 50px, 10%, 5vh, etc.
  • For instance, setting 100px positions the active tab 100 pixels from the top.

Once you're familiar with these configurations, creating tabs with this system will be fast, intuitive, and customizable. Enjoy building with it!