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ả | | :--------------------------------- | :--------------------- | :---------- | :------------------------------------------------------------ | | buttonsDescription | IButton[] | [] | Danh sách nút bấm trong phần mô tả. | | buttonsDescriptionContainerClass | string | flex ... | Class CSS container cho nút bấm mô tả. | | buttonsLeft | IButton[] | [] | Danh sách các nút bấm bên trái nhãn. | | buttonsRight | IButton[] | [] | Danh sách các nút bấm bên phải nhãn. | | classInclude | string | libs-... | Class CSS tổng thể cho component. | | count | number | 0 | Số lượng ký tự hiện tại (để hiển thị bộ đếm). | | description | string | undefined | Văn bản mô tả phía dưới nhãn. | | descriptionClass | string | libs-... | Class CSS cho phần mô tả. | | disableButtonsDescription | boolean | undefined | Vô hiệu hóa các nút bấm trong mô tả. | | disableButtonsLeft | boolean | undefined | Vô hiệu hóa các nút bấm bên trái. | | disableButtonsRight | boolean | undefined | Vô hiệu hóa các nút bấm bên phải. | | hasToggle | boolean | false | Hiển thị công tắc chuyển đổi (switch). | | iconPopoverClass | string | libs-... | Class icon cho tooltip (mặc định là icon help). | | labelLeft | string | undefined | Văn bản nhãn bên trái. | | labelLeftBehindToggleButton | boolean | undefined | Hiển thị nhãn trái phía sau nút toggle. | | labelLeftClass | string | libs-... | Class CSS cho nhãn bên trái. | | labelRight | string | undefined | Văn bản nhãn bên phải. | | labelRightClass | string | '' | Class CSS cho nhãn bên phải. | | labelRightRequired | string | undefined | Nhãn phải bắt buộc (thường dùng để hiển thị text thay vì *). | | limitLength | number | 0 | Giới hạn ký tự tối đa. | | onlyShowCount | boolean | undefined | Chỉ hiển thị bộ đếm (ẩn giới hạn tổng). | | popover | IPopover | undefined | Cấu hình cho tooltip hiển thị khi hover vào icon thông tin. | | required | boolean | false | Hiển thị dấu sao đỏ đánh dấu bắt buộc. | | timerDestroyPopover | number | 0 | Thời gian hủy popover (ms). | | toggleActive | boolean | false | Trạng thái của công tắc. | | toggleDisable | boolean | undefined | Vô hiệu hóa công tắc. | | toggleSize | 'default' \| 'large' | 'default' | Kích thước công tắc. | | zIndexPopover | number | 10 | Z-index của popover. |

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. | | outLabelLeftClick | MouseEvent | Phát ra khi click vào nhãn bên trái. | | outLabelRightClick | boolean | Phát ra khi click vào phần văn bản bên phải. | | outSwitchEvent | ISwitchEvent | Phát ra khi trạng thái công tắc thay đổi. |

Tech Stack

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

License

MIT