@lemonadejs/tabs 1.0.0 → 1.0.2
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.
- package/README.md +36 -4
- package/dist/index.d.ts +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# LemonadeJS Tabs
|
|
2
2
|
|
|
3
3
|
[Official website and documentation is here](https://lemonadejs.net/components/tabs)
|
|
4
4
|
|
|
@@ -8,8 +8,7 @@ The LemonadeJS JavaScript Tabs is a responsive and reactive component that creat
|
|
|
8
8
|
|
|
9
9
|
## Features
|
|
10
10
|
|
|
11
|
-
- Lightweight: The JavaScript
|
|
12
|
-
- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
|
|
11
|
+
- Lightweight: The JavaScript Tabs is only about 2 KBytes;
|
|
13
12
|
- Integration: It can be used as a standalone library or integrated with any modern framework;
|
|
14
13
|
|
|
15
14
|
## Getting Started
|
|
@@ -26,13 +25,46 @@ $ npm install @lemonadejs/tabs
|
|
|
26
25
|
|
|
27
26
|
### CDN
|
|
28
27
|
|
|
29
|
-
To use
|
|
28
|
+
To use tabs via a CDN, include the following script tags in your HTML file:
|
|
30
29
|
|
|
31
30
|
```html
|
|
32
31
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
33
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
34
|
```
|
|
35
35
|
|
|
36
|
+
### Usage
|
|
37
|
+
|
|
38
|
+
Quick example with Lemonade
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
import Tabs from "@lemonadejs/tabs";
|
|
42
|
+
import "@lemonadejs/tabs/dist/style.css"
|
|
43
|
+
|
|
44
|
+
export default function Component() {
|
|
45
|
+
const self = this;
|
|
46
|
+
|
|
47
|
+
return `<Tabs>
|
|
48
|
+
<div title="Tab 1">Content of the first tab</div>
|
|
49
|
+
<div title="Tab 2">Content of the second tab</div>
|
|
50
|
+
</Tabs>`;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
[You can find more examples here in the official documentation.](https://lemonadejs.net/components/tabs)
|
|
55
|
+
|
|
56
|
+
### Configuration
|
|
57
|
+
|
|
58
|
+
You can configure things such as tabs titles, tabs contents and selected tab.
|
|
59
|
+
|
|
60
|
+
#### Tabs Properties
|
|
61
|
+
|
|
62
|
+
| Property | Type | Description |
|
|
63
|
+
| -------- | ---- | ----------- |
|
|
64
|
+
| data? | array | An optional alternative method to provide the title and content that will serve as the basis for rendering the tabs. |
|
|
65
|
+
| selected? | number | The index of the initially selected tab. Starts from 0. |
|
|
66
|
+
| position? | string | The position of the tabs bar within the parent element. Use 'center' to center-align the tabs. |
|
|
67
|
+
|
|
36
68
|
## License
|
|
37
69
|
|
|
38
70
|
The [LemonadeJS](https://lemonadejs.net) tabs is released under the MIT.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
interface Tabs {
|
|
8
|
+
(): any
|
|
9
|
+
[key: string]: any
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface options {
|
|
13
|
+
data?: object[];
|
|
14
|
+
selected?: number;
|
|
15
|
+
position?: number;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface instance {
|
|
19
|
+
data: object[];
|
|
20
|
+
selected: number;
|
|
21
|
+
position: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export declare function Tabs(el: HTMLElement, options?: options): instance;
|
package/package.json
CHANGED