Tabs

Tabs allow users to organize related content into multiple sections that occupy the same space, with only one section visible at a time. 🗂️

Installation

You can install the Tabs component using the global design system bundle or as a standalone script.

Using the Bundle

<script src="https://webcdn.ringover.com/app/download/design-system/lts/design-system.js"></script>
<script>
const { RoTabs } = RingoUI;
customElements.define('ro-tabs', RoTabs);
</script>

Standalone

<script src="https://webcdn.ringover.com/app/download/design-system/lts/components/tabs.js"></script>
<script>
customElements.define('ro-tabs', RoTabs.RoTabs);
</script>

Examples

Basic Tabs

Wrap your tab structure in an <ro-tabs> element. Use .ro-tab-header to contain the navigation items (.ro-tab-item), and .ro-tab-content to contain the panels (.ro-tab-panel). The component automatically handles the switching logic and ARIA states.

<ro-tabs id="my-tabs">
<div class="ro-tab-header">
  <div class="ro-tab-item">Account</div>
  <div class="ro-tab-item">Settings</div>
  <div class="ro-tab-item">Notifications</div>
</div>
<div class="ro-tab-content">
  <div class="ro-tab-panel">
    <h3 class="ro-heading ro-level-4">Account Details</h3>
    <p class="ro-text">Manage your account information here.</p>
  </div>
  <div class="ro-tab-panel">
    <h3 class="ro-heading ro-level-4">Settings</h3>
    <p class="ro-text">Update your preferences and privacy settings.</p>
  </div>
  <div class="ro-tab-panel">
    <h3 class="ro-heading ro-level-4">Notifications</h3>
    <p class="ro-text">View your recent alerts and messages.</p>
  </div>
</div>
</ro-tabs>

Preview

Account

Settings

Notifications

Account Details

Manage your account information here.

Settings

Update your preferences and privacy settings.

Notifications

View your recent alerts and messages.

Underline Variant

Add the .ro-variant-underline class to the .ro-tab-header for a sleeker look with an animated underline indicator.

<ro-tabs>
<div class="ro-tab-header ro-variant-underline">
  <div class="ro-tab-item">Active</div>
  <div class="ro-tab-item">Pending</div>
  <div class="ro-tab-item">Archived</div>
</div>
<div class="ro-tab-content">
  <div class="ro-tab-panel">Active items list...</div>
  <div class="ro-tab-panel">Pending items list...</div>
  <div class="ro-tab-panel">Archived items list...</div>
</div>
</ro-tabs>

Preview

Active

Pending

Archived

Active items list…

Pending items list…

Archived items list…

Sizing

Add the .ro-size-lg class to the .ro-tab-header to increase the height and padding of the tabs.

<ro-tabs>
<div class="ro-tab-header ro-size-lg">
  <div class="ro-tab-item">Large Tab 1</div>
  <div class="ro-tab-item">Large Tab 2</div>
</div>
<div class="ro-tab-content">
  <div class="ro-tab-panel">Content 1</div>
  <div class="ro-tab-panel">Content 2</div>
</div>
</ro-tabs>

Preview

Large Tab 1

Large Tab 2

Content 1

Content 2

JavaScript & Events

You can listen for the tab-change event to perform actions when a new tab is selected.

Event Details

Event Name	Detail	Description
tab-change	{ groupId, index, tab, panel }	Fired when a tab is activated.

Example

const tabs = document.querySelector("#my-tabs");
tabs.addEventListener("tab-change", (event) => {
  const { index, groupId } = event.detail;
  console.log(`Switched to tab ${index} in group ${groupId}`);
});