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>`
}

Quick example with React

import React, { useRef } from "react";
import Tabs from "@lemonadejs/tabs/dist/react";
import '@lemonadejs/tabs/dist/style.css';

const data = [{ title: 'Tab 1', content: 'Content of first tab' }, { title: 'Tab 2', content: 'Content of second tab' }]
export default function App() {
    const tabs = useRef();
    return (
        <>
            <Tabs selected={0} ref={tabs} data={data}/>
        </>
    );
}

Quick example with React

<template>
  <Tabs :selected="0">
      <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>

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. |

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. |

License

The LemonadeJS Tabs is released under the MIT.

Other Tools

• jSuites
• Jspreadsheet Data Grid