@libs-ui/components-buttons-select-color

Buttons Select Color

Giới thiệu

select-color là một component nút kết hợp bộ chọn màu (Color Picker) cho Angular. Cho phép người dùng chọn màu sắc từ popover, hỗ trợ cấu hình tùy chỉnh, áp dụng ngay hoặc chờ xác nhận, và tùy chỉnh hiển thị nút.

Tính năng

• Mở popover Color Picker khi click vào nút tùy chỉnh
• Tùy chỉnh trigger button (nhãn, icon, kiểu, class)
• Hỗ trợ cấu hình customOptions cho Color Picker
• Hỗ trợ applyNow: tự động emit khi chọn màu nếu true
• Hỗ trợ externalContent: sử dụng nội dung bên ngoài làm trigger
• Tùy chọn hướng hiển thị direction và zIndex của popover
• Phát sự kiện outColorChange và outColorChangeMultipleType khi màu thay đổi

Cài đặt

Yêu cầu

• Angular 18.0.0 trở lên
• Tailwind CSS 3.3.0 trở lên

Hướng dẫn

Để cài đặt component select-color, sử dụng npm hoặc yarn:

npm install @libs-ui/components-buttons-select-color

hoặc

yarn add @libs-ui/components-buttons-select-color

Sử dụng

Cách 1: Import inline template

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsSelectColorComponent],
  template: `
    <libs_ui-components-buttons-select_color
      [button]="{ label: 'Chọn màu', type: 'button-primary' }"
      [customOptions]="{ /* cấu hình picker */ }"
      [applyNow]="false"
      (outColorChange)="onColorChange($event)"></libs_ui-components-buttons-select_color>
  `,
})
export class ExampleComponent {
  onColorChange(color: string) {
    console.log('Màu đã chọn:', color);
  }
}

Cách 2: Sử dụng file HTML riêng biệt

<!-- example.component.html -->
<libs_ui-components-buttons-select_color
  [button]="{ label: 'Chọn màu', classIconLeft: 'text-red-500', type: 'button-outline' }"
  [direction]="'top'"
  [externalContent]="false"
  [zIndex]="1500"
  (outColorChangeMultipleType)="onMultiColorChange($event)"></libs_ui-components-buttons-select_color>

// example.component.ts
import { Component } from '@angular/core';
import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsSelectColorComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {}

Công nghệ sử dụng

• Angular 18: standalone components, signals, control flow
• Tailwind CSS: quản lý style, tiện lợi để xây dựng demo

API Reference

Inputs

Tên	Kiểu dữ liệu	Mặc định	Mô tả
button	IButton	-	Cấu hình trigger button (label, icon, class, popover, ...).
customOptions	IPickerCustomOptions	-	Tùy chọn cấu hình cho Color Picker.
applyNow	boolean	false	Nếu true, emit outColorChange ngay khi chọn màu.
externalContent	boolean	false	Sử dụng nội dung bên ngoài làm trigger.
direction	TYPE_POPOVER_DIRECTION	'bottom'	Hướng hiển thị của popover.
zIndex	number	1200	Z-index của popover.

Outputs

Tên	Kiểu dữ liệu	Mô tả
outColorChange	string	Sự kiện emit màu khi chọn (dạng hex).
outColorChangeMultipleType	IOutputColorChangeMultipleType	Sự kiện emit nhiều định dạng màu khác nhau.

Interfaces

IPickerCustomOptions

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

Mô tả: Tùy chọn cấu hình cho Color Picker.

IOutputColorChangeMultipleType

export interface IOutputColorChangeMultipleType {
  rgba: string;
  rgb: string;
  hex: string;
  hsl: string;
  hsla: string;
}

Mô tả: Đối tượng chứa nhiều định dạng giá trị màu khi chọn.