--- title: "JavaScript Tabs | LemonadeJS v5" description: "LemonadeJS v5 archive. A versatile and dynamic JavaScript component designed to facilitate the organization and presentation of distinct content sections." source: https://lemonadejs.com/docs/v5/plugins/tabs/ --- # JavaScript Tabs `JavaScript Component`{.jtag .black .framework-images} `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 ```bash npm install @lemonadejs/tabs ``` ### Settings | 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](https://codesandbox.io/s/optimistic-chaplygin-tc764x?file=/index.html) ```html
Content of the first tab
Content of the second tab
``` ```javascript 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`
Content of the first tab
Content of the second tab
` } ``` ```jsx 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 (
) } ``` ```vue ``` ### Data property Create a new tabs instance based on a JSON data definition with the on open event. [See this example on codesandbox](https://codesandbox.io/s/affectionate-lamarr-fmwvdx?file=/index.html) ```html
``` ```javascript 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: `` }, { title: "Tuesday", content: `` } ]; const open = () => { self.selected = 1; } const onopen = () => { console.log('tab is opened'); } return render => render`
` } ``` ```jsx import React, { useRef } from "react"; import Tabs from "@lemonadejs/tabs/dist/react"; import "@lemonadejs/tabs/dist/style.css"; const data = [ { title: "Monday", content: `` }, { title: "Tuesday", content: `` } ]; export default function App() { const component = useRef(); const open = () => { component.current.selected = 1; } const onopen = () => { console.log('tab is opened'); } return <> ; } ``` ```vue ``` ### Create as Web Component Also, you can use the plugin as a web component as below. ```html
Content of the first tab
Content of the second tab
 ``` ## Related Tools - [JavaScript Tabs](https://jsuites.net/docs/javascript-tabs) - Standalone tabs component with icons and animations