JavaScript Switch Button
The LemonadeJS Switch component offers a dynamic and intuitive solution for managing binary states within your web applications. As a versatile and framework-agnostic JavaScript plugin, it seamlessly integrates with popular frameworks like Vue, React, and Angular. This feature-packed Switch component simplifies the implementation of toggle functionality, providing a streamlined user interface for binary choices.
Documentation
Installation
npm install @lemonadejs/switchSettings
| Attribute | Description |
|---|---|
| text?: String | The displayed text. |
| value?: Any | The current value of the component. |
| name?: String | The attribute name assigned to the switch element. |
| disabled?: Boolean | Disables the functionality of the switch. |
Examples
JavaScript Switch Example
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
<div id='root'></div>
<script>
function Component() {
this.value = false;
return render => render`<div>
<p>Value: ${this.value}</p>
<Switch text="Toggle" :bind="this.value" />
</div>`
}
lemonade.render(Component, document.getElementById('root'));
</script>
</html>import Switch from '@lemonadejs/switch';
import '@lemonadejs/switch/dist/style.css'
export default function App() {
this.value = false;
return render => render`<div>
<p>Value: ${this.value}</p>
<Switch text="Toggle" :bind="this.value" />
</div>`
}import React, { useRef } from 'react';
import Switch from '@lemonadejs/switch/dist/react';
import '@lemonadejs/switch/dist/style.css'
export default function App() {
const myRef = useRef();
return (<div>
<Switch ref={myRef} text={'Toggle'} />
</div>);
}<template>
<Switch text="Toggle" />
</template>
<script>
import Switch from '@lemonadejs/switch/dist/vue';
import '@lemonadejs/switch/dist/style.css'
export default {
name: 'App',
components: {
Switch
},
}
</script>Basic HTML Example
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
<div id='root'></div>
<script>
Switch(document.getElementById('root'), {
text: 'Toggle'
});
</script>
</html>Render as Web Component
live
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/switch/dist/style.min.css" />
<lm-switch text="Bitcoin" value="true"></lm-switch><br>
<lm-switch text="Ethereum" value="false"></lm-switch>
</html>Related Tools
- JavaScript Toggle - Additional toggle and switch UI patterns