tabs
This is tab 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is tab 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is tab 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is tab 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is tab 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
This is tab 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tabs
You can nest an [rwx-tabs] inside another [rwx-tabs]. The "Sub Tabs" will receive slightly different styles (smaller font size, more identing, etc) to identify them differently.
Tabs come with hash checking and automatic opening by default. If there is an [rwx-tabs] element on a page and a user comes to the page with a hash in the url, Roseworx tabs will check themselves to see if an element exists with an id equal to the URL hash and automatically opens the tab in which it resides, even if its in a sub tab.
Tabs are accessible - You can navigate and change tabs with the keyboard left arrow, right arrow and enter keys, providing you have keyboard tabbed to the element.
Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwx.tabs.scanDOM().
This Component extends the functionality of rwxMists.
Description
The Roseworx Tabs Core Component allows you to break up different types of content into segmented tabs and gives the user a more engaging and modern way to navigate that content, different from traditional methods. Tabs are responsive and accesible via keyboard navigation. Tabs can also be navigated programatically and give you the ability to add custom events for when tabs are changed (useful for anayltics).
Usage
- Copy the html code and personalise it to your use case.
- tabs functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-tabs attribute and that follows the correct html structure will automatically have functionality implemented.
- To customise the appearance of the tabs change these SCSS Variables.
Additional Methods
In order to use the additional methods, a unique id attribute must be present on the [rwx-tabs] element you are targeting. These must only be called on or after the window load event.
void
(
ID Of Tab Element: String
Number Of Tab: Number
)
Programtically change a tabs element to a specified tab number.
rwx.tabs.goToTab('idOfTabs', tabNumber);
void
(
ID Of Tab Element: String
Number Of Tab: Number
Event To Run On ('tabShow' or 'tabHide'): String
Function To Run On Specified Event: Function
)
Run a specified function when a tab element has had its tab changed to OR from a specific tab number.
rwx.tabs.addEvent('idOfTabs', tabNumber, 'tabShow', ()=>{console.log("Tab Shown")});
rwx.tabs.addEvent('idOfTabs', tabNumber, 'tabHide', ()=>{console.log("Tab Hidden")});