@libs-ui/components-buttons-dropdown

Button Dropdown

Giới thiệu

@libs-ui/components-buttons-dropdown là một component Dropdown Button dùng cho Angular, cho phép hiển thị danh sách các tùy chọn khi nhấn vào button, hỗ trợ custom templates, binding lựa chọn và nhiều tùy chỉnh linh hoạt.

Tính năng

• Hiển thị danh sách items dưới dạng popover khi click (hoặc hover)
• Hỗ trợ custom label và key cho items
• Two-way binding giá trị chọn (keySelected)
• Tuỳ chọn auto apply (applyNow) hoặc yêu cầu click nút Áp dụng
• Hỗ trợ vô hiệu hóa và tuỳ chỉnh kích thước, kiểu button
• Cấu hình popover (kích thước, vị trí, z-index, direction)
• Hỗ trợ custom CSS classes cho container và items

Cài đặt

npm install @libs-ui/components-buttons-dropdown

hoặc

yarn add @libs-ui/components-buttons-dropdown

Sử dụng

Inline Template

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsDropdownComponent],
  template: `
    <libs_ui-components-buttons-dropdown
      [label]="'Chọn mục'"
      [items]="items"
      [(keySelected)]="selectedKey"
      (outSelectItem)="onSelect($event)"></libs_ui-components-buttons-dropdown>
  `,
})
export class ExampleComponent {
  items = [
    { id: '1', label: 'Option 1' },
    { id: '2', label: 'Option 2' },
    { id: '3', label: 'Option 3' },
  ];
  selectedKey = '1';
  onSelect(item: any) {
    console.log('Selected:', item);
  }
}

File HTML riêng

import { Component } from '@angular/core';
import { LibsUiComponentsButtonsDropdownComponent } from '@libs-ui/components-buttons-dropdown';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [LibsUiComponentsButtonsDropdownComponent],
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  items = [
    /* ... */
  ];
  selectedKey = '';
  onSelect(item: any) {}
}

<libs_ui-components-buttons-dropdown
  [label]="'Chọn mục'"
  [items]="items"
  [(keySelected)]="selectedKey"
  (outSelectItem)="onSelect($event)"></libs_ui-components-buttons-dropdown>

API Reference

Inputs

Tên	Kiểu	Mặc định	Mô tả
label	string	''	Text hiển thị trên nút (ví dụ: "Chọn mục").
items	Array<any>	required	Danh sách các mục sẽ hiển thị trong menu.
fieldDisplay	string	label	Trường của mục để hiển thị nội dung.
keyField	string	id	Trường của mục dùng làm giá trị key.
keySelected	string	undefined	Giá trị key đang được chọn (hỗ trợ two-way binding).
applyNow	boolean	false	Nếu true: chọn xong tự emit sự kiện; false: cần bấm nút Áp dụng.
showBorderBottom	boolean	false	Hiện đường kẻ dưới menu khi mở.
disable	boolean	false	Khóa dropdown, không cho chọn mục.
sizeButton	TYPE_SIZE_BUTTON	medium	Kích thước nút (.small/.medium/.large).
typeButton	TYPE_BUTTON	button-primary	Kiểu style của nút (primary, secondary,...).
classLabel	string	''	Class CSS thêm cho nhãn (text).
classInclude	string	''	Class CSS thêm cho phần container chính.
classIncludeContainer	string	undefined	Class CSS thêm cho phần container nội dung.
fieldClass	string	class	Trường trong mục chứa class CSS khi cần.
classIconLeft	string	''	Class CSS thêm cho icon bên trái.
classIconRight	string	libs-ui-icon-move-right rotate-[90deg]	Class CSS thêm cho icon bên phải.
iconOnlyType	boolean	false	Chỉ hiện icon, không hiển thị nhãn.
popupConfig	IPopupConfigButtonDropdown	default cấu hình popover	Cấu hình chi tiết cho popover (vị trí, kích thước).
ignoreHiddenPopoverContentWhenMouseLeave	boolean	true	Giữ popover mở khi chuột rời khỏi nội dung.
modePopover	TYPE_POPOVER_MODE	click-toggle	Cách hiển thị popover (click, hover,...).

Outputs

Tên	Kiểu	Mô tả
outSelectItem	(item: any) => void	Trả về mục (item) bạn vừa chọn.
outHover	(isHover: boolean) => void	Phát ra khi rê chuột lên/xuống trên một mục.
outApply	(item: any) => void	Phát ra khi bạn bấm nút Áp dụng (với applyNow=false).
outPopoverEvent	(event: TYPE_POPOVER_EVENT) => void	Phát ra các sự kiện của popover (show, hide, click, ...).
outFunctionsControl	(control: IPopoverFunctionControlEvent) => void	Cung cấp control API để điều khiển popover.
outIconEvent	(event: MouseEvent) => void	Phát ra khi bạn nhấn vào icon.

Interfaces

export interface IButtonDropdown extends IButton {
  items: any[];
  fieldDisplay?: string;
  keyField?: string;
  keySelected?: string;
  applyNow?: boolean;
  showBorderBottom?: boolean;
  popupConfig?: IPopupConfigButtonDropdown;
  ignoreHiddenPopoverContentWhenMouseLeave?: boolean;
  modePopover?: TYPE_POPOVER_MODE;
}

export interface IPopupConfigButtonDropdown {
  width?: number;
  maxWidth?: number;
  maxHeight?: number;
  zIndex?: number;
  direction?: TYPE_POPOVER_DIRECTION;
  timeDestroy?: number;
  widthByParent?: boolean;
  position?: {
    mode: 'start' | 'center' | 'end';
    distance: number;
  };
  classInclude?: string;
}

export type TYPE_POPOVER_DIRECTION = 'top' | 'right' | 'bottom' | 'left';
export type TYPE_POPOVER_MODE = 'hover' | 'click' | 'click-toggle' | 'click_open_and_click_panel_content_hidden';