Label Component

@libs-ui/components-label là một component cơ bản nhưng đa năng dùng để hiển thị nhãn (label) cho các thành phần UI khác. Nó hỗ trợ tooltip, văn bản phụ, nút bấm điều khiển và cả công tắc (toggle switch).

Tính năng nổi bật

• 🌍 Đa ngôn ngữ: Hỗ trợ tích hợp sẵn TranslateModule.
• 🛠️ Cấu hình phong phú:
  • Hỗ trợ văn bản bên trái (labelLeft) và bên phải (labelRight).
  • Đánh dấu bắt buộc (required).
  • Hỗ trợ Tooltip (popover) với biểu tượng tùy chỉnh.
  • Tích hợp công tắc (hasToggle).
• 🔘 Điều khiển linh hoạt:
  • Cho phép thêm mảng các nút bấm (IButton) vào bên trái, bên phải hoặc trong phần mô tả.
  • Xử lý các sự kiện click nút và chuyển đổi trạng thái công tắc.
• 📝 Mô tả & Đếm số:
  • Hiển thị văn bản mô tả phụ bên dưới nhãn chính.
  • Tích hợp bộ đếm ký tự (count và limitLength) thường dùng cho các ô nhập liệu.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-label

Cách sử dụng

Import Module

import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';

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

Ví dụ cơ bản

<libs_ui-components-label
  [labelLeft]="'Họ và tên'"
  [required]="true"
  [popover]="{ content: 'Vui lòng nhập đầy đủ tên tiếng Việt có dấu' }"></libs_ui-components-label>

Ví dụ nâng cao (Có Toggle và Buttons)

<libs_ui-components-label
  [labelLeft]="'Thông báo qua Email'"
  [hasToggle]="true"
  [toggleActive]="true"
  [buttonsRight]="[{ icon: 'libs-ui-icon-edit', key: 'edit' }]"
  [description]="'Gửi bản tin hàng tuần về các sản phẩm mới nhất.'"></libs_ui-components-label>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :----------------------------- | :----------- | :---------- | :---------------------------------------------------------- | | labelLeft | string | undefined | Văn bản nhãn bên trái. | | required | boolean | false | Hiển thị dấu sao đỏ đánh dấu bắt buộc. | | popover | IPopover | undefined | Cấu hình cho tooltip hiển thị khi hover vào icon thông tin. | | buttonsLeft / buttonsRight | IButton[] | [] | Danh sách các nút bấm ở hai bên nhãn. | | hasToggle | boolean | false | Hiển thị công tắc chuyển đổi (switch). | | toggleActive | boolean | false | Trạng thái của công tắc. | | description | string | undefined | Văn bản mô tả phía dưới nhãn. | | count | number | 0 | Số lượng ký tự hiện tại (để hiển thị bộ đếm). | | limitLength | number | 0 | Giới hạn ký tự tối đa. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :------------------- | :------------- | :--------------------------------------------------------------- | | outClickButton | IButton | Phát ra khi người dùng click vào bất kỳ nút nào trong component. | | outSwitchEvent | ISwitchEvent | Phát ra khi trạng thái công tắc thay đổi. | | outLabelRightClick | boolean | Phát ra khi click vào phần văn bản bên phải. |

Tech Stack

• Core: Angular 18+, Signals
• Dependencies: @libs-ui/components-popover, @libs-ui/components-buttons-button, @libs-ui/components-switch.

License

MIT