The `wml-toggle-zero` library offers a specialized Angular component designed to enhance user interfaces with a toggle switch functionality. This library focuses on delivering a straightforward and efficient way to implement toggle switches in Angular app
npm install @windmillcode/angular-wml-toggle-zerowml-toggle-zero library offers a specialized Angular component designed to enhance user interfaces with a toggle switch functionality. This library focuses on delivering a straightforward and efficient way to implement toggle switches in Angular applications, providing an intuitive and interactive element for users. The core purpose of this library is to offer a highly customizable toggle switch that can be seamlessly integrated into various Angular projects, facilitating user interactions for settings, preferences, or any scenario where a binary choice is required.
wml-toggle-zero library is the WMLToggleZeroComponent, a central component that embodies the toggle switch's functionality. This component allows for a high degree of customization and interactivity, offering developers the flexibility to adapt the toggle switch's appearance and behavior to fit their application's needs. Parameters such as toggleBackgroundOffColor, toggleBackgroundOnColor, and textToggleLeftMargin enable developers to customize the look and feel of the toggle, while properties like toggleText and thumb provide control over the switch's text labels and thumb indicator. Additionally, the onToggle method and triggerToggle function offer ways to interact with the toggle's state, enabling dynamic responses to user interactions. The library encourages a pattern where the WMLToggleZeroComponent acts as a standalone, reusable UI element, promoting modularity and ease of integration within larger application structures.
bash
npm install -d @windmillcode/angular-wml-toggle-zero
`
Usage
To integrate and utilize the wml-toggle-zero component in your Angular application, follow the examples below. These examples demonstrate how to incorporate the toggle switch into your templates and manage its state and configurations through your component's TypeScript file.
Basic Toggle Switch
$3
`html
`
$3
`typescript
import { Component } from '@angular/core';
import { WMLToggleZeroParams } from '@windmillcode/angular-wml-toggle-zero';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
})
export class ExampleComponent {
basicToggleParams = new WMLToggleZeroParams({
toggleText: { text: 'Off' },
thumb: { value: false },
onToggle: (self) => {
self.toggleText.text = self.thumb.value ? 'On' : 'Off';
}
});
}
`
Customized Toggle Switch
$3
`html
`
$3
`typescript
import { Component } from '@angular/core';
import { WMLToggleZeroParams } from '@windmillcode/angular-wml-toggle-zero';
@Component({
selector: 'app-custom-toggle',
templateUrl: './custom-toggle.component.html',
})
export class CustomToggleComponent {
customToggleParams = new WMLToggleZeroParams({
toggleText: { text: 'Off', class: 'custom-toggle-text' },
thumb: { value: false, class: 'custom-thumb' },
container: { class: 'custom-container' },
toggleBackgroundOffColor: 'rgba(255, 0, 0)', // Red when off
toggleBackgroundOnColor: 'rgba(0, 255, 0)', // Green when on
onToggle: (self) => {
self.toggleText.text = self.thumb.value ? 'Active' : 'Inactive';
}
});
}
`
In the above examples, WMLToggleZeroParams is used to configure the toggle switch. The toggleText property sets the text label, thumb manages the toggle's thumb, and container styles the overall toggle component. The onToggle function updates the toggle's state and label dynamically based on user interaction.
Docs
| Property | Type | Description |
|---------------------------|-------------------------|--------------------------------------------------------------------------------------------------|
| id | string | Identifier for the toggle instance. |
| container | WMLUIProperty | An instance of the WMLUIProperty class representing the container of the toggle. |
| thumb | WMLUIProperty | An instance of the WMLUIProperty class representing the thumb of the toggle. |
| toggleText | WMLUIProperty | An instance of the WMLUIProperty class representing the text associated with the toggle. |
| textToggleLeftMargin | number | The left margin for the toggle text. |
| toggleBackgroundOffColor| string | The background color when the toggle is in the "Off" state. |
| toggleBackgroundOnColor | string | The background color when the toggle is in the "On" state. |
| Method | Description |
|-----------------|---------------------------------------------------------------------------------------------------------------|
| onToggle | Callback function triggered when the toggle state changes. Updates the toggle text based on the thumb value.|
| triggerToggle` | allows control of the toggle control.|