@libs-ui/components-inputs-color

Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity) và palette tùy chỉnh.

Giới thiệu

LibsUiComponentsInputsColorComponent là một standalone Angular component để chọn màu sắc. Nó tích hợp một bảng màu mặc định, khả năng lưu bảng màu tùy chỉnh và thanh trượt độ mờ trực quan.

Tính năng

• ✅ Chọn màu từ palette mặc định
• ✅ Lưu và quản lý palette tùy chỉnh (tối đa 8 màu)
• ✅ Điều chỉnh độ mờ (opacity) trực tiếp
• ✅ Tích hợp Popover thông minh
• ✅ Sử dụng Angular Signals cho hiệu năng cao
• ✅ Standalone Component, dễ dàng tích hợp

Khi nào sử dụng

• Khi cần cho phép người dùng chọn màu sắc trong các form cấu hình.
• Khi cần tích hợp tính năng quản lý màu cá nhân.
• Khi cần điều chỉnh cả màu sắc và độ trong suốt của phần tử.

Cài đặt

# npm
npm install @libs-ui/components-inputs-color

# yarn
yarn add @libs-ui/components-inputs-color

Import

import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs-color';

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

Ví dụ

Cơ bản

<libs_ui-components-inputs-color [(data)]="colorData" />

Với Custom Provider

<libs_ui-components-inputs-color
  [(data)]="colorData"
  [functionGetListColorDefault]="getColors"
  [functionSetListColorCustom]="saveColors" />

API

libs_ui-components-inputs-color

Inputs

| Property | Type | Default | Description | | ------------------------------- | ------------------------------------------------- | ----------------------------- | ----------------------------------- | | [(data)] | model<IColorPickerData> | { color: '', opacity: 100 } | Dữ liệu màu sắc và độ mờ hiện tại | | [zIndex] | model<number> | 1200 | Z-index cho popover bảng màu | | [customOptions] | input<IPickerCustomOptions> | undefined | Cấu hình cho color picker bên trong | | [functionGetListColorDefault] | input<() => Promise<Array<string>>> | undefined | Hàm lấy danh sách màu mặc định | | [functionGetListColorCustom] | input<() => Promise<Array<string>>> | undefined | Hàm lấy danh sách màu tùy chỉnh | | [functionSetListColorCustom] | input<(colors: Array<string>) => Promise<void>> | undefined | Hàm lưu danh sách màu tùy chỉnh |

Outputs

| Property | Type | Description | | ------------------ | ------------------ | ------------------------------------ | | (outColorChange) | IColorPickerData | Emit khi màu sắc hoặc độ mờ thay đổi |

Types & Interfaces

export interface IColorPickerData {
  color: string;
  opacity: number;
}

export interface IPickerCustomOptions {
  slBarSize?: Array<number>;
  hueBarSize?: Array<number>;
  alphaBarSize?: Array<number>;
  showHsl?: boolean;
  showRgb?: boolean;
  showHex?: boolean;
  showAlpha?: boolean;
  color?: string | Array<number>;
  format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
}

Công nghệ

| Technology | Version | Purpose | | --------------- | ------- | ---------------- | | Angular | 18+ | Framework | | Angular Signals | - | State management | | TailwindCSS | 3.x | Styling | | OnPush | - | Change Detection |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4500/inputs/color

Unit Tests

# Chạy tests
npx nx test components-inputs-color

# Coverage
npx nx test components-inputs-color --coverage

License

MIT