@libs-ui/components-radio-single

Component hiển thị một radio button đơn lẻ, cho phép người dùng chọn hoặc bỏ chọn (tùy thuộc vào logic xử lý bên ngoài).

Giới thiệu

LibsUiComponentsRadioSingleComponent là một standalone Angular component dùng để hiển thị một radio button. Nó hoạt động như một "dumb component" (uncontrolled), nghĩa là trạng thái active thường được kiểm soát bởi parent hoặc một logic group bên ngoài. Component hỗ trợ nhiều tùy chỉnh về giao diện như label, icon, avatar, và tooltip.

Tính năng

• ✅ Uncontrolled State: Trạng thái active được điều khiển qua input two-way binding (model<boolean>).
• ✅ Rich Content: Hỗ trợ Label, Avatar, Custom Icon, và Popover Tooltip.
• ✅ Interaction Control: clickExactly cho phép kiểm soát vùng click (chỉ icon/label hoặc toàn bộ container).
• ✅ Custom Styling: Cung cấp nhiều input class để tùy biến giao diện dễ dàng.

Khi nào sử dụng

• Khi cần một radio button hoạt động độc lập (không cần group logic phức tạp).
• Custom radio button layout (kết hợp với avatar, icon, popover).
• Dùng để xây dựng các component phức tạp hơn như Radio Group style custom.

Cài đặt

# npm
npm install @libs-ui/components-radio-single

# yarn
yarn add @libs-ui/components-radio-single

Import

import { LibsUiComponentsRadioSingleComponent } from '@libs-ui/components-radio-single';

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

Ví dụ

Basic Usage

<libs_ui-components-radio-single
  [active]="isActive"
  (outChange)="isActive = $event.active"
  label="Option 1" />

With Avatar

<libs_ui-components-radio-single
  [active]="isActive"
  [avatarConfig]="{ linkAvatar: '...', size: 32 }"
  label="User Option" />

API

libs_ui-components-radio-single

Inputs

| Property | Type | Default | Description | | -------------------------- | ------------------------- | -------------------- | ------------------------------------------------------------------------------ | | [active] | model<boolean> | false | Trạng thái active (checked) của radio. | | [key] | unknown | undefined | Key định danh cho radio button. | | [label] | string | '' | Label hiển thị bên cạnh radio. | | [disable] | boolean | false | Vô hiệu hóa tương tác. | | [clickExactly] | boolean | true | true: chỉ click icon/label mới active. false: click container cũng active. | | [typeRadio] | 'normal' \| 'medium' | 'normal' | Kích thước/kiểu dáng radio. | | [avatarConfig] | IAvatarConfig | undefined | Cấu hình hiển thị avatar. | | [popover] | IPopover | undefined | Cấu hình popover tooltip. | | [classInclude] | string | '' | Custom class cho container. | | [classLabelInclude] | string | 'libs-ui-font-h4r' | Custom class cho label. | | [classIncludeIcon] | string | '' | Custom class cho icon radio. | | [labelInterpolateParams] | Record<string, unknown> | {} | Params cho translate pipe của label. | | [ignoreRadio] | boolean | false | Ẩn icon radio (chỉ hiển thị label/avatar). |

Outputs

| Property | Type | Description | | ----------------- | ------------- | ------------------------------------------------- | | (outChange) | IRadioEvent | Emit khi trạng thái thay đổi ({ active, key }). | | (outClickLabel) | void | Emit khi click vào label. |

Interfaces

IRadioEvent

| Property | Type | Description | | -------- | --------- | ------------------------------ | | active | boolean | Trạng thái mới sau khi change. | | key | any | Key của radio button. | | item | any | (Optional) Item data đi kèm. |

Công nghệ

| Technology | Version | Purpose | | --------------- | ------- | ---------------- | | Angular | 18+ | Framework | | Angular Signals | - | State management | | OnPush | - | Change Detection |

Demo

npx nx serve core-ui

Truy cập path: /components/radio/single