Switch

Giới thiệu

@libs-ui/components-switch là component Toggle Switch cho Angular, cho phép người dùng bật/tắt một tùy chọn với trạng thái hai chiều và sự kiện revert.

Tính năng

• Kích thước: 'default' | 'large'
• Hỗ trợ vô hiệu hóa switch (disable)
• Two-way binding cho trạng thái active
• Phát ra sự kiện outSwitch với payload { active: boolean; revert: () => Promise<void> }

Cài đặt

Yêu cầu

• Angular 18.0.0 trở lên
• Tailwind CSS 3.3.0 trở lên

Để cài đặt, sử dụng npm hoặc yarn:

npm install @libs-ui/components-switch

hoặc

yarn add @libs-ui/components-switch

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsSwitchComponent],
  template: `
    <libs_ui-components-switch
      [size]="'large'"
      [disable]="false"
      [(active)]="isOn"
      (outSwitch)="onSwitch($event)"></libs_ui-components-switch>
  `,
})
export class ExampleComponent {
  isOn = false;

  onSwitch(event: { active: boolean; revert: () => Promise<void> }) {
    console.log('Switch toggled:', event.active);
  }
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsSwitchComponent } from '@libs-ui/components-switch';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsSwitchComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  isOn = true;
}

<libs_ui-components-switch
  [size]="'default'"
  [disable]="false"
  [(active)]="isOn"
  (outSwitch)="onSwitch($event)"></libs_ui-components-switch>

Công nghệ sử dụng

• Angular 18: standalone components, Signals
• Tailwind CSS: cho styling

API Reference

Inputs

| Tên | Kiểu | Mặc định | Mô tả | | ------- | ---------------------- | ----------- | ------------------------------------ | | size | 'default' \| 'large' | 'default' | Kích thước của switch | | disable | boolean | false | Vô hiệu hóa switch | | active | boolean | false | Trạng thái bật/tắt (two-way binding) |

Outputs

| Tên | Kiểu | Mô tả | | --------- | ------------------------------- | ----------------------------------------------------- | | outSwitch | (event: ISwitchEvent) => void | Sự kiện khi toggle, trả về trạng thái và hàm revert |

Interfaces

ISwitch

export interface ISwitch {
  disable?: boolean;
  active?: boolean;
  action?: (event: ISwitchEvent) => Promise<void>;
}

Mô tả cấu hình switch (inputs):

• disable: vô hiệu hóa switch.
• active: trạng thái bật/tắt.
• action: hàm xử lý khi toggle (tùy chọn).

ISwitchEvent

export interface ISwitchEvent {
  active: boolean;
  revert: () => Promise<void>;
}

Mô tả payload của sự kiện outSwitch:

• active: trạng thái mới.
• revert: hàm để hoàn nguyên về trạng thái trước đó.

Demo

Để xem ví dụ tương tác về component Switch, bạn có thể sử dụng LibsUiComponentsSwitchDemoComponent trong ứng dụng của mình:

import { Component } from '@angular/core';
import { LibsUiComponentsSwitchDemoComponent } from '@libs-ui/components-switch';

@Component({
  selector: 'app-switch-demo',
  standalone: true,
  imports: [LibsUiComponentsSwitchDemoComponent],
  template: `
    <lib-switch-demo></lib-switch-demo>
  `,
})
export class SwitchDemoComponent {}

Hoặc thêm trực tiếp trong template HTML:

<lib-switch-demo></lib-switch-demo>