@lemonadejs/tabs 5.2.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +131 -129
  2. package/package.json +20 -20
package/README.md CHANGED
@@ -1,129 +1,131 @@
1
- # LemonadeJS Tabs
2
-
3
- [Official website and documentation is here](https://lemonadejs.net/components/tabs)
4
-
5
- Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
-
7
- The LemonadeJS JavaScript Tabs is a responsive and reactive component that creates selected tabs.
8
-
9
- ## Features
10
-
11
- - Lightweight: The JavaScript Tabs is only about 2 KBytes;
12
- - Integration: It can be used as a standalone library or integrated with any modern framework;
13
-
14
- ## Getting Started
15
-
16
- You can install using NPM or using directly from a CDN.
17
-
18
- ### npm Installation
19
-
20
- To install it in your project using npm, run the following command:
21
-
22
- ```bash
23
- $ npm install @lemonadejs/tabs
24
- ```
25
-
26
- ### CDN
27
-
28
- To use tabs via a CDN, include the following script tags in your HTML file:
29
-
30
- ```html
31
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
34
- ```
35
-
36
- ### Usage
37
-
38
- Quick example with Lemonade
39
-
40
- ```javascript
41
- import lemonade from 'lemonadejs'
42
- import Tabs from '@lemonadejs/tabs';
43
- import '@lemonadejs/tabs/dist/style.css';
44
-
45
- export default function App() {
46
- const self = this;
47
-
48
- return `<div>
49
- <Tabs :selected="0">
50
- <div title="Tab 1">Content of the first tab</div>
51
- <div title="Tab 2">Content of the second tab</div>
52
- </Tabs>
53
- </div>`
54
- }
55
- ```
56
-
57
- Quick example with React
58
-
59
- ```jsx
60
- import React, { useRef } from "react";
61
- import Tabs from "@lemonadejs/tabs/dist/react";
62
- import '@lemonadejs/tabs/dist/style.css';
63
-
64
- const data = [{ title: 'Tab 1', content: 'Content of first tab' }, { title: 'Tab 2', content: 'Content of second tab' }]
65
- export default function App() {
66
- const tabs = useRef();
67
- return (
68
- <>
69
- <Tabs selected={0} ref={tabs} data={data}/>
70
- </>
71
- );
72
- }
73
- ```
74
-
75
- Quick example with React
76
-
77
- ```vue
78
- <template>
79
- <Tabs :selected="0">
80
- <div title="Tab 1">Content of the first tab</div>
81
- <div title="Tab 2">Content of the second tab</div>
82
- </Tabs>
83
- </template>
84
-
85
- <script>
86
- import Tabs from '@lemonadejs/tabs/dist/vue';
87
- import '@lemonadejs/tabs/dist/style.css';
88
-
89
- export default {
90
- name: 'App',
91
- components: {
92
- Tabs,
93
- },
94
- };
95
- </script>
96
- ```
97
-
98
- [You can find more examples here in the official documentation.](https://lemonadejs.net/components/tabs)
99
-
100
- ### Configuration
101
-
102
- You can configure things such as tabs titles, tabs contents and selected tab.
103
-
104
- #### Settings
105
-
106
- | Property | Type | Description |
107
- | -------- | ---- | ----------- |
108
- | selected? | number | The index of the initially selected tab. Starts from 0. |
109
- | position? | string | The position of the tabs bar within the parent element. Use 'center' to center-align the tabs. |
110
- | 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. |
111
- | round? | boolean | Dictates whether the tab style will feature rounded corners. |
112
- | onopen? | function | When a new tabs is opened. |
113
-
114
- #### Tab Item
115
-
116
- | Property | Description |
117
- | -------- | ----------- |
118
- | title | The title of the tab, serving as the label displayed on the tab options. |
119
- | content | The HTML content intended for this specific tab. |
120
-
121
-
122
- ## License
123
-
124
- The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
125
-
126
- ## Other Tools
127
-
128
- - [jSuites](https://jsuites.net)
129
- - [Jspreadsheet Data Grid](https://jspreadsheet.com)
1
+ # LemonadeJS Tabs
2
+
3
+ [Official website and documentation is here](https://lemonadejs.net/components/tabs)
4
+
5
+ Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
6
+
7
+ The LemonadeJS JavaScript Tabs is a responsive and reactive component that creates selected tabs.
8
+
9
+ ## Features
10
+
11
+ - Lightweight: The JavaScript Tabs is only about 2 KBytes;
12
+ - Integration: It can be used as a standalone library or integrated with any modern framework;
13
+
14
+ ## Getting Started
15
+
16
+ You can install using NPM or using directly from a CDN.
17
+
18
+ ### npm Installation
19
+
20
+ To install it in your project using npm, run the following command:
21
+
22
+ ```bash
23
+ $ npm install @lemonadejs/tabs
24
+ ```
25
+
26
+ ### CDN
27
+
28
+ To use tabs via a CDN, include the following script tags in your HTML file:
29
+
30
+ ```html
31
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
32
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
33
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
34
+ ```
35
+
36
+ ### Usage
37
+
38
+ Quick example with Lemonade
39
+
40
+ ```javascript
41
+ import lemonade from 'lemonadejs';
42
+ import Tabs from '@lemonadejs/tabs';
43
+ import '@lemonadejs/tabs/dist/style.css';
44
+
45
+ export default function App() {
46
+ const self = this;
47
+
48
+ return `<div>
49
+ <Tabs :selected="0">
50
+ <div title="Tab 1">Content of the first tab</div>
51
+ <div title="Tab 2">Content of the second tab</div>
52
+ </Tabs>
53
+ </div>`;
54
+ }
55
+ ```
56
+
57
+ Quick example with React
58
+
59
+ ```jsx
60
+ import React, { useRef } from 'react';
61
+ import Tabs from '@lemonadejs/tabs/dist/react';
62
+ import '@lemonadejs/tabs/dist/style.css';
63
+
64
+ const data = [
65
+ { title: 'Tab 1', content: 'Content of first tab' },
66
+ { title: 'Tab 2', content: 'Content of second tab' },
67
+ ];
68
+ export default function App() {
69
+ const tabs = useRef();
70
+ return (
71
+ <>
72
+ <Tabs selected={0} ref={tabs} data={data} />
73
+ </>
74
+ );
75
+ }
76
+ ```
77
+
78
+ Quick example with React
79
+
80
+ ```vue
81
+ <template>
82
+ <Tabs :selected="0">
83
+ <div title="Tab 1">Content of the first tab</div>
84
+ <div title="Tab 2">Content of the second tab</div>
85
+ </Tabs>
86
+ </template>
87
+
88
+ <script>
89
+ import Tabs from '@lemonadejs/tabs/dist/vue';
90
+ import '@lemonadejs/tabs/dist/style.css';
91
+
92
+ export default {
93
+ name: 'App',
94
+ components: {
95
+ Tabs,
96
+ },
97
+ };
98
+ </script>
99
+ ```
100
+
101
+ [You can find more examples here in the official documentation.](https://lemonadejs.net/components/tabs)
102
+
103
+ ### Configuration
104
+
105
+ You can configure things such as tabs titles, tabs contents and selected tab.
106
+
107
+ #### Settings
108
+
109
+ | Property | Type | Description |
110
+ | --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
111
+ | selected? | number | The index of the initially selected tab. Starts from 0. |
112
+ | position? | string | The position of the tabs bar within the parent element. Use 'center' to center-align the tabs. |
113
+ | 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. |
114
+ | round? | boolean | Dictates whether the tab style will feature rounded corners. |
115
+ | onopen? | function | When a new tabs is opened. |
116
+
117
+ #### Tab Item
118
+
119
+ | Property | Description |
120
+ | -------- | ------------------------------------------------------------------------ |
121
+ | title | The title of the tab, serving as the label displayed on the tab options. |
122
+ | content | The HTML content intended for this specific tab. |
123
+
124
+ ## License
125
+
126
+ The [LemonadeJS](https://lemonadejs.net) Tabs is released under the MIT.
127
+
128
+ ## Other Tools
129
+
130
+ - [jSuites](https://jsuites.net)
131
+ - [Jspreadsheet Data Grid](https://jspreadsheet.com)
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
- {
2
- "name": "@lemonadejs/tabs",
3
- "title": "JavaScript Tabs",
4
- "description": "LemonadeJS tabs is a JavaScript component to create tabs.",
5
- "author": {
6
- "name": "Contact <contact@lemonadejs.net>",
7
- "url": "https://lemonadejs.net"
8
- },
9
- "keywords": [
10
- "javascript tabs",
11
- "lemonadejs tabs",
12
- "js tabs",
13
- "tabs js"
14
- ],
15
- "dependencies": {
16
- "lemonadejs": "^5.2.0"
17
- },
18
- "main": "dist/index.js",
19
- "version": "5.2.0"
20
- }
1
+ {
2
+ "name": "@lemonadejs/tabs",
3
+ "title": "JavaScript Tabs",
4
+ "description": "LemonadeJS tabs is a JavaScript component to create tabs.",
5
+ "author": {
6
+ "name": "Contact <contact@lemonadejs.net>",
7
+ "url": "https://lemonadejs.net"
8
+ },
9
+ "keywords": [
10
+ "javascript tabs",
11
+ "lemonadejs tabs",
12
+ "js tabs",
13
+ "tabs js"
14
+ ],
15
+ "dependencies": {
16
+ "lemonadejs": "^5.3.2"
17
+ },
18
+ "main": "dist/index.js",
19
+ "version": "5.8.0"
20
+ }