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.

$3

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

``bash
$ npm install @lemonadejs/tabs
`

$3

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

`html



`

$3

Quick example with Lemonade

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

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

return

`jsx
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 (
<>


);
}
`

Quick example with React

`vue



`

You can find more examples here in the official documentation.

$3

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