@libs-ui/components-switch

Component chuyển đổi trạng thái (On/Off) dạng Switch (Toggle).

Giới thiệu

LibsUiComponentsSwitchComponent là một standalone Angular component cung cấp giao diện Switch Button. Component hỗ trợ 2 kích thước, trạng thái disable và hỗ trợ binding hai chiều (model) cho trạng thái active.

Tính năng

• ✅ 2 kích thước: Default và Large
• ✅ Hỗ trợ trạng thái Disabled
• ✅ Two-way binding với Signals (active)
• ✅ Event output chi tiết (kèm hàm revert để hoàn tác)
• ✅ Custom Styling với CSS Variable

Khi nào sử dụng

• Khi người dùng cần chuyển đổi nhanh giữa hai trạng thái (Bật/Tắt).
• Thay thế cho Checkbox khi muốn thể hiện hành động có hiệu lực tức thì.
• Trong các trang cài đặt hệ thống, kích hoạt tính năng.

Cài đặt

# npm
npm install @libs-ui/components-switch

# yarn
yarn add @libs-ui/components-switch

Import

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

@Component({
  standalone: true,
  imports: [LibsUiComponentsSwitchComponent],
  // ...
})
export class YourComponent {}

Ví dụ

Basic (Default Size)

<libs_ui-components-switch [(active)]="isActive" />

Large Size

<libs_ui-components-switch
  size="large"
  [(active)]="isActive" />

Disabled State

<libs_ui-components-switch
  [disable]="true"
  [active]="true" />

Handling Change Event

Sử dụng (outSwitch) để xử lý sự kiện active thay đổi. Event cung cấp hàm revert() để quay lại trạng thái cũ nếu cần (ví dụ: API call thất bại).

<libs_ui-components-switch (outSwitch)="onSwitchChange($event)" />

onSwitchChange(event: ISwitchEvent) {
  console.log('New state:', event.active);
  // Nếu muốn hoàn tác:
  // event.revert();
}

API

LibsUiComponentsSwitchComponent

Selector: libs_ui-components-switch

Inputs

| Property | Type | Default | Description | | ------------ | ---------------------- | ----------- | --------------------------------------------- | | [size] | 'default' \| 'large' | 'default' | Kích thước của switch. | | [disable] | boolean | false | Vô hiệu hóa switch (không thể click). | | [(active)] | boolean | false | Trạng thái bật/tắt của switch (Model Signal). |

Outputs

| Property | Type | Description | | ------------- | -------------- | ------------------------------------------------- | | (outSwitch) | ISwitchEvent | Emit khi người dùng click để thay đổi trạng thái. |

Interfaces

ISwitchEvent

export interface ISwitchEvent {
  active: boolean; // Trạng thái mới sau khi click
  revert: () => Promise<void>; // Hàm utility để quay về trạng thái cũ
}

Styling

Component sử dụng CSS Variables để tùy biến màu sắc:

| Variable | Default | Description | | ------------------------- | ---------------- | ------------------- | | --libs-ui-color-default | #226ff5 (Blue) | Màu nền khi active. |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/switch