Luna Tabs
LunaTabs adds basic tabbing functionality for your applications. LunaTabs allows developers to take full control over styling and animations while automatically adding accessibility.
Example
There are three required data attributes to setup our tabs. data-luna-tabs
is used on our wrapper element which contains both our tab buttons and the tabbed content. data-luna-tab
used on our tab buttons. These require a unique name that relate them to the data-luna-tab-target
which contains each of our tabbed elements content.
Basic Markup
Tab 1 Tab 2 Tab 3 Tab Content 1 Tab Content 2 Tab Content 3
Initialization
- Firstly install the LunaTabs package via npm.
npm install luna-tabs
- Import the class.
;
- Initialize the class.
// Initialize all tab elements by data attribute.const allTabs = document; allTabs; // Initialize a specific element.const tabs = document;const tabContainer = tabs;
LunaTabs will apply an is-active
class to both the tab button and the tab content element.
A basic reveal for tab content could be as follows: