projects/commons/src/lib/elements/switch/components/switch.component.ts
| selector | cmn-switch |
| styleUrls | ./switch.component.scss |
| templateUrl | ./switch.component.html |
Inputs |
| color | |
Type : Colors
|
|
| id | |
Type : string
|
|
| isChecked | |
Type : boolean
|
|
| isDisabled | |
Type : boolean
|
|
| isRounded | |
Type : boolean
|
|
| isThin | |
Type : boolean
|
|
| label | |
Type : string
|
|
| name | |
Type : string
|
|
import { Component, Input } from '@angular/core';
import { Colors } from '../../../shared/enums';
@Component({
selector: 'cmn-switch',
templateUrl: './switch.component.html',
styleUrls: [ './switch.component.scss' ],
})
export class SwitchComponent {
@Input() public readonly id: string;
@Input() public readonly name: string;
@Input() public readonly color: Colors;
@Input() public readonly label: string;
@Input() public readonly isThin: boolean;
@Input() public readonly isRounded: boolean;
@Input() public readonly isChecked: boolean;
@Input() public readonly isDisabled: boolean;
}
<input type="checkbox"
class="switch {{ color }}"
[class.is-thin]="isThin"
[class.is-rounded]="isRounded"
[id]="id"
[name]="name"
[checked]="isChecked"
[disabled]="isDisabled">
<label [for]="id">
{{ label }}
</label>
./switch.component.scss