@lemonadejs/switch 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.
- package/README.md +108 -108
- package/dist/style.css +1 -1
- package/package.json +21 -21
package/README.md
CHANGED
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
# LemonadeJS Switch
|
|
2
|
-
|
|
3
|
-
[Official website and documentation is here](https://lemonadejs.net/components/switch)
|
|
4
|
-
|
|
5
|
-
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
-
|
|
7
|
-
The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- Lightweight: The JavaScript Switch 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/switch
|
|
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/switch/dist/index.min.js"></script>
|
|
33
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### Usage
|
|
37
|
-
|
|
38
|
-
Quick example with Lemonade
|
|
39
|
-
|
|
40
|
-
```javascript
|
|
41
|
-
import lemonade from 'lemonadejs'
|
|
42
|
-
import Switch from '@lemonadejs/switch';
|
|
43
|
-
import '@lemonadejs/switch/dist/style.css';
|
|
44
|
-
|
|
45
|
-
export default function App() {
|
|
46
|
-
const self = this;
|
|
47
|
-
|
|
48
|
-
return `<div>
|
|
49
|
-
<Switch text="On/Off" />
|
|
50
|
-
</div
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
```jsx
|
|
55
|
-
import React, { useRef } from
|
|
56
|
-
import Switch from
|
|
57
|
-
import '@lemonadejs/switch/dist/style.css';
|
|
58
|
-
|
|
59
|
-
export default function App() {
|
|
60
|
-
const switchRef = useRef();
|
|
61
|
-
return (
|
|
62
|
-
<>
|
|
63
|
-
<Switch text=
|
|
64
|
-
</>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
Quick example with Lemonade
|
|
70
|
-
|
|
71
|
-
```vue
|
|
72
|
-
<template>
|
|
73
|
-
|
|
74
|
-
</template>
|
|
75
|
-
|
|
76
|
-
<script>
|
|
77
|
-
import Switch from '@lemonadejs/switch/dist/vue';
|
|
78
|
-
import '@lemonadejs/switch/dist/style.css';
|
|
79
|
-
|
|
80
|
-
export default {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
};
|
|
86
|
-
</script>
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
[You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
|
|
90
|
-
|
|
91
|
-
#### Settings
|
|
92
|
-
|
|
93
|
-
| Attribute
|
|
94
|
-
|
|
95
|
-
| text?: string
|
|
96
|
-
| value?: any
|
|
97
|
-
| name?: string
|
|
98
|
-
| disabled?: boolean | Disables the functionality of the switch.
|
|
99
|
-
| onopen?
|
|
100
|
-
|
|
101
|
-
## License
|
|
102
|
-
|
|
103
|
-
The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
|
|
104
|
-
|
|
105
|
-
## Other Tools
|
|
106
|
-
|
|
107
|
-
- [jSuites](https://jsuites.net/docs)
|
|
108
|
-
- [Jspreadsheet Data Grid](https://jspreadsheet.com)
|
|
1
|
+
# LemonadeJS Switch
|
|
2
|
+
|
|
3
|
+
[Official website and documentation is here](https://lemonadejs.net/components/switch)
|
|
4
|
+
|
|
5
|
+
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
+
|
|
7
|
+
The LemonadeJS JavaScript Switch is a responsive and reactive component that enables users to make a binary choice through a visually appealing interface.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Lightweight: The JavaScript Switch 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/switch
|
|
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/switch/dist/index.min.js"></script>
|
|
33
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Usage
|
|
37
|
+
|
|
38
|
+
Quick example with Lemonade
|
|
39
|
+
|
|
40
|
+
```javascript
|
|
41
|
+
import lemonade from 'lemonadejs';
|
|
42
|
+
import Switch from '@lemonadejs/switch';
|
|
43
|
+
import '@lemonadejs/switch/dist/style.css';
|
|
44
|
+
|
|
45
|
+
export default function App() {
|
|
46
|
+
const self = this;
|
|
47
|
+
|
|
48
|
+
return `<div>
|
|
49
|
+
<Switch text="On/Off" />
|
|
50
|
+
</div>`;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
```jsx
|
|
55
|
+
import React, { useRef } from 'react';
|
|
56
|
+
import Switch from '@lemonadejs/switch/dist/react';
|
|
57
|
+
import '@lemonadejs/switch/dist/style.css';
|
|
58
|
+
|
|
59
|
+
export default function App() {
|
|
60
|
+
const switchRef = useRef();
|
|
61
|
+
return (
|
|
62
|
+
<>
|
|
63
|
+
<Switch text="On/Off" ref={switchRef} />
|
|
64
|
+
</>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Quick example with Lemonade
|
|
70
|
+
|
|
71
|
+
```vue
|
|
72
|
+
<template>
|
|
73
|
+
<Switch text="On/Off" />
|
|
74
|
+
</template>
|
|
75
|
+
|
|
76
|
+
<script>
|
|
77
|
+
import Switch from '@lemonadejs/switch/dist/vue';
|
|
78
|
+
import '@lemonadejs/switch/dist/style.css';
|
|
79
|
+
|
|
80
|
+
export default {
|
|
81
|
+
name: 'App',
|
|
82
|
+
components: {
|
|
83
|
+
Switch,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
</script>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
[You can find more examples here in the official documentation.](https://lemonadejs.net/components/switch)
|
|
90
|
+
|
|
91
|
+
#### Settings
|
|
92
|
+
|
|
93
|
+
| Attribute | Description |
|
|
94
|
+
| ------------------ | ---------------------------------------------------- | -------------------------- |
|
|
95
|
+
| text?: string | The displayed text. |
|
|
96
|
+
| value?: any | The current value of the component. |
|
|
97
|
+
| name?: string | The attribute `name` assigned to the switch element. |
|
|
98
|
+
| disabled?: boolean | Disables the functionality of the switch. |
|
|
99
|
+
| onopen? | function | When a new tabs is opened. |
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
The [LemonadeJS](https://lemonadejs.net) Switch is released under the MIT.
|
|
104
|
+
|
|
105
|
+
## Other Tools
|
|
106
|
+
|
|
107
|
+
- [jSuites](https://jsuites.net/docs)
|
|
108
|
+
- [Jspreadsheet Data Grid](https://jspreadsheet.com)
|
package/dist/style.css
CHANGED
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@lemonadejs/switch",
|
|
3
|
-
"title": "JavaScript Switch",
|
|
4
|
-
"description": "LemonadeJS JavaScript reactive material switch",
|
|
5
|
-
"author": {
|
|
6
|
-
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
-
"url": "https://lemonadejs.net"
|
|
8
|
-
},
|
|
9
|
-
"keywords": [
|
|
10
|
-
"javascript switch",
|
|
11
|
-
"lemonadejs switch",
|
|
12
|
-
"js switch",
|
|
13
|
-
"switch js"
|
|
14
|
-
],
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"lemonadejs": "^5.2
|
|
17
|
-
},
|
|
18
|
-
"main": "dist/index.js",
|
|
19
|
-
"types": "dist/index.d.ts",
|
|
20
|
-
"version": "5.
|
|
21
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@lemonadejs/switch",
|
|
3
|
+
"title": "JavaScript Switch",
|
|
4
|
+
"description": "LemonadeJS JavaScript reactive material switch",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Contact <contact@lemonadejs.net>",
|
|
7
|
+
"url": "https://lemonadejs.net"
|
|
8
|
+
},
|
|
9
|
+
"keywords": [
|
|
10
|
+
"javascript switch",
|
|
11
|
+
"lemonadejs switch",
|
|
12
|
+
"js switch",
|
|
13
|
+
"switch js"
|
|
14
|
+
],
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"lemonadejs": "^5.3.2"
|
|
17
|
+
},
|
|
18
|
+
"main": "dist/index.js",
|
|
19
|
+
"types": "dist/index.d.ts",
|
|
20
|
+
"version": "5.8.0"
|
|
21
|
+
}
|