JavaScript Tabs
JavaScript Component
Package size: 1.4KB gzipped
The LemonadeJS Tabs component is a lightweight, framework-agnostic component designed to organize and display distinct content sections in a clean, minimalist tabbed interface.
Documentation
Installation
npm install @lemonadejs/tabsSettings
| Property | Description |
|---|---|
selected?: Number | Index of the initially selected tab (default: 0). |
position?: String | Position of the tabs bar within the parent element ('center' to align tabs to the center). |
data?: tabItem[] | Provides an alternative method for defining tab titles and content using a tabItem object. See the Tab Item section below. |
round?: Boolean | Determines if tabs should have rounded corners. |
allowCreate?: Boolean | Displays a button to create a new tab when set. |
onopen?: (self: Object, selected: Number) => void | Callback triggered when a new tab is opened. |
Tab Item
| Property | Description |
|---|---|
title | The title of the tab, serving as the label displayed on the tab options. |
content | The HTML content intended for this specific tab. |
Examples
Basic example
How to utilize Tabs in simple implementations: This example demonstrates the declarative approach.
See this example on codesandbox
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
<div id="root">
<div title="Tab 1">Content of the first tab</div>
<div title="Tab 2">Content of the second tab</div>
</div>
<script>
Tabs(document.getElementById("root"));
</script>
</html>import lemonade from 'lemonadejs'
import Tabs from '@lemonadejs/tabs';
import '@lemonadejs/tabs/dist/style.css';
export default function App() {
const self = this;
return render => render`<div>
<Tabs>
<div title="Tab 1">Content of the first tab</div>
<div title="Tab 2">Content of the second tab</div>
</Tabs>
</div>`
}import React, { useRef } from "react";
import Tabs from "@lemonadejs/tabs/dist/react";
import "@lemonadejs/tabs/dist/style.css";
export default function Component() {
const component = useRef();
const data = [
{
title: "Tab 1",
content: `Content of the first tab`
},
{
title: "Tab 2",
content: `Content of the second tab`
}
];
return (<div>
<Tabs ref={component} data={data}/>
</div>)
}
<template>
<Tabs ref="component">
<div title="Tab 1">Content of the first tab</div>
<div title="Tab 2">Content of the second tab</div>
</Tabs>
</template>
<script>
import Tabs from '@lemonadejs/tabs/dist/vue';
import '@lemonadejs/tabs/dist/style.css';
export default {
name: 'App',
components: {
Tabs,
},
};
</script>Data property
Create a new tabs instance based on a JSON data definition with the on open event.
See this example on codesandbox
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
<div id="root"></div>
<input id="btn1" type="button" value="Select Second Tab" />
<script>
const data = [
{
title: "Monday",
content: `<ul>
<li>09:00 AM - 10:00 AM: Keynote Speech</li>
<li>10:30 AM - 12:00 PM: Panel Discussion</li>
<li>12:00 PM - 01:30 PM: Lunch Break</li>
<li>01:30 PM - 03:00 PM: Workshop</li>
<li>03:30 PM - 05:00 PM: Networking Session</li>
</ul>`
},
{
title: "Tuesday",
content: `<ul>
<li>09:30 AM - 10:30 AM: Keynote Speech</li>
<li>11:00 AM - 12:30 PM: Workshop</li>
<li>12:30 PM - 01:30 PM: Lunch Break</li>
<li>02:00 PM - 03:30 PM: Breakout Sessions</li>
<li>04:00 PM - 05:30 PM: Fireside Chat</li>
</ul>`
}
];
const component = Tabs(document.getElementById("root"), {
data: data,
onopen: () => {
console.log('tab is opened');
}
});
document.getElementById("btn1").addEventListener("click", () => {
component.selected = 1;
})
</script>
</html>import lemonade from 'lemonadejs'
import Tabs from '@lemonadejs/tabs';
import '@lemonadejs/tabs/dist/style.css';
export default function App() {
const self = this;
this.selected = 0;
const data = [
{
title: "Monday",
content: `<ul>
<li>09:00 AM - 10:00 AM: Keynote Speech</li>
<li>10:30 AM - 12:00 PM: Panel Discussion</li>
<li>12:00 PM - 01:30 PM: Lunch Break</li>
<li>01:30 PM - 03:00 PM: Workshop</li>
<li>03:30 PM - 05:00 PM: Networking Session</li>
</ul>`
},
{
title: "Tuesday",
content: `<ul>
<li>09:30 AM - 10:30 AM: Keynote Speech</li>
<li>11:00 AM - 12:30 PM: Workshop</li>
<li>12:30 PM - 01:30 PM: Lunch Break</li>
<li>02:00 PM - 03:30 PM: Breakout Sessions</li>
<li>04:00 PM - 05:30 PM: Fireside Chat</li>
</ul>`
}
];
const open = () => {
self.selected = 1;
}
const onopen = () => {
console.log('tab is opened');
}
return render => render`<div>
<Tabs data=${data} selected=${self.selected} onopen=${onopen}></Tabs>
<button onclick="${open}">Go To second tab</button>
</div>`
}
import React, { useRef } from "react";
import Tabs from "@lemonadejs/tabs/dist/react";
import "@lemonadejs/tabs/dist/style.css";
const data = [
{
title: "Monday",
content: `<ul>
<li>09:00 AM - 10:00 AM: Keynote Speech</li>
<li>10:30 AM - 12:00 PM: Panel Discussion</li>
<li>12:00 PM - 01:30 PM: Lunch Break</li>
<li>01:30 PM - 03:00 PM: Workshop</li>
<li>03:30 PM - 05:00 PM: Networking Session</li>
</ul>`
},
{
title: "Tuesday",
content: `<ul>
<li>09:30 AM - 10:30 AM: Keynote Speech</li>
<li>11:00 AM - 12:30 PM: Workshop</li>
<li>12:30 PM - 01:30 PM: Lunch Break</li>
<li>02:00 PM - 03:30 PM: Breakout Sessions</li>
<li>04:00 PM - 05:30 PM: Fireside Chat</li>
</ul>`
}
];
export default function App() {
const component = useRef();
const open = () => {
component.current.selected = 1;
}
const onopen = () => {
console.log('tab is opened');
}
return <>
<Tabs ref={component} data={data} onopen={onopen} />
<button onClick={() => open()}>Go To Second Tab</button>
</>;
}<template>
<Tabs ref="component" :data="data" :onopen="onopen" />
<button @click="open">Go To Second Tab</button>
</template>
<script>
import Tabs from '@lemonadejs/tabs/dist/vue';
import '@lemonadejs/tabs/dist/style.css';
export default {
name: 'App',
components: {
Tabs,
},
data() {
const data = [
{
title: "Monday",
content: `<ul>
<li>09:00 AM - 10:00 AM: Keynote Speech</li>
<li>10:30 AM - 12:00 PM: Panel Discussion</li>
<li>12:00 PM - 01:30 PM: Lunch Break</li>
<li>01:30 PM - 03:00 PM: Workshop</li>
<li>03:30 PM - 05:00 PM: Networking Session</li>
</ul>`
},
{
title: "Tuesday",
content: `<ul>
<li>09:30 AM - 10:30 AM: Keynote Speech</li>
<li>11:00 AM - 12:30 PM: Workshop</li>
<li>12:30 PM - 01:30 PM: Lunch Break</li>
<li>02:00 PM - 03:30 PM: Breakout Sessions</li>
<li>04:00 PM - 05:30 PM: Fireside Chat</li>
</ul>`
}
]
return {
data
}
},
methods: {
open: function() {
this.$refs.component.current.selected = 1;
},
onopen: function() {
console.log('tab is opened');
}
}
};
</script>Create as Web Component
Also, you can use the plugin as a web component as below.
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
<lm-tabs id="root">
<div title="Tab 1">Content of the first tab</div>
<div title="Tab 2">Content of the second tab</div>
</lm-tabs>
<input id="btn1" type="button" value="Select Second Tab" />
<script>
// My web component element
let instance = document.getElementById('root');
// Bind event to my button
document.getElementById("btn1").addEventListener("click", () => {
instance.selected = 1;
})
</script>
</html>Related Tools
- JavaScript Tabs - Standalone tabs component with icons and animations