@teenageinterface/switch v0.1.1
Switch Component
The Switch component is a customizable toggle switch for enabling or disabling a specific functionality. It can also be rendered as an icon-based switch for additional flexibility.
Installation
Ensure that you have installed the @teenageinterface/switch library in your Angular project. If not, you can add it using:
npm install @teenageinterface/switchUsage
Import the SwitchComponent into your Angular application:
import { SwitchComponent } from '@teenageinterface/switch';
@Component({
selector: 'app-switch-example',
template: `
<tiSwitch [(checked)]="isToggled" [asIcon]="true"></tiSwitch>
`,
})
export class SwitchExampleComponent {
isToggled: boolean = false;
}Example
<!-- Default Switch -->
<tiSwitch [(checked)]="isSwitchOn"></tiSwitch>
<!-- Icon-Based Switch -->
<tiSwitch [(checked)]="isSwitchOn" [asIcon]="true"></tiSwitch>Properties
| Property | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Indicates whether the switch is toggled on or off. |
asIcon | boolean | false | If true, renders the switch as an icon. |
Events
| Event | Payload | Description |
|---|---|---|
checkedChange | boolean | Emits the updated checked state when toggled. |
Features
Two Modes of Rendering
- Default Switch: Displays a standard toggle switch.
- Icon-Based Switch: When
asIconis set totrue, the switch is rendered as an icon for a more compact UI.
Two-Way Binding
The checked property supports Angular's two-way data binding using the [(checked)] syntax for easier state management.
Event Emission
The checkedChange event is emitted whenever the switch state changes, allowing you to handle the toggle event in your application.
Example with Two-Way Binding
<tiSwitch [(checked)]="isDarkMode"></tiSwitch>
<p>Dark mode is {{ isDarkMode ? 'enabled' : 'disabled' }}</p>Documentation
For more details, visit the official documentation.
Repository
The source code is available on GitHub.
License
This project is licensed under the MIT License.