LemonadeJS tabs is a JavaScript component to create tabs.
npm install @lemonadejs/tabsOfficial 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.
- Lightweight: The JavaScript Tabs is only about 2 KBytes;
- Integration: It can be used as a standalone library or integrated with any modern framework;
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
``bash`
$ npm install @lemonadejs/tabs
To use tabs via a CDN, include the following script tags in your HTML file:
`html`
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
;
}
`Quick example with React
`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
Content of the first tab
Content of the second tab
`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. |#### 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. |
The LemonadeJS Tabs is released under the MIT.