@lemonadejs/tabs NPM

LemonadeJS Tabs

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS JavaScript Tabs is a responsive and reactive component that creates selected tabs.

Features

Lightweight: The JavaScript Tabs is only about 2 KBytes;
Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/tabs

CDN

To use tabs via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" 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" />

Usage

Quick example with Lemonade

import lemonade from 'lemonadejs'
import Tabs from '@lemonadejs/tabs';
import '@lemonadejs/tabs/dist/style.css';

export default function App() {
    const self = this;

    return `<div>
        <Tabs :selected="0">
            <div title="Tab 1">Content of the first tab</div>
            <div title="Tab 2">Content of the second tab</div>
        </Tabs>
    </div>`
}

You can find more examples here in the official documentation.

Configuration

You can configure things such as tabs titles, tabs contents and selected tab.

Settings

Property	Type	Description
selected?	number	The index of the initially selected tab. Starts from 0.
position?	string	The position of the tabs bar within the parent element. Use 'center' to center-align the tabs.
data?	tabItem[]	An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. See more about the `tabItem` object in the Tab Item section below.
round?	boolean	Dictates whether the tab style will feature rounded corners.
onopen?	function	When a new tabs is opened.