@libs-ui/components-breadcrumb

Component Breadcrumb để hiển thị tiến trình của một quy trình gồm nhiều bước.

Giới thiệu

LibsUiComponentsBreadcrumbComponent là một standalone Angular component được thiết kế để hiển thị các bước trong một flowchart hoặc tiến trình làm việc. Mỗi bước có thể có trạng thái hoàn thành, đang chọn hoặc vô hiệu hóa.

Tính năng

• ✅ Hỗ trợ nhiều chế độ hiển thị (center, left, right).
• ✅ Tùy chỉnh chiều rộng khoảng cách giữa các bước.
• ✅ Tích hợp đa ngôn ngữ cho tiêu đề các bước.
• ✅ Điều khiển linh hoạt qua FunctionsControl (set selected, set completed, disable steps...).
• ✅ Sử dụng Angular Signals cho tính phản hồi cao.
• ✅ OnPush Change Detection tối ưu hiệu năng.

Khi nào sử dụng

• Khi người dùng cần biết họ đang ở đâu trong một quy trình gồm nhiều bước.
• Khi cần hướng dẫn người dùng hoàn thành các bước theo một trình tự nhất định.
• Phù hợp cho các form đăng ký nhiều bước, quy trình checkout, hoặc thiết lập thông số.

Cài đặt

npm install @libs-ui/components-breadcrumb

Import

import { LibsUiComponentsBreadcrumbComponent } from '@libs-ui/components-breadcrumb';

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

Ví dụ

Basic

<libs_ui-components-breadcrumb [steps]="breadcrumbSteps" />

Với External Controls

<libs_ui-components-breadcrumb
  [steps]="breadcrumbSteps"
  (outFunctionControl)="onFunctionsControl($event)" />

API

libs_ui-components-breadcrumb

Inputs

| Property | Type | Default | Description | | -------------------- | ------------------------------- | ----------- | --------------------------------------------------- | | [width] | number | 24 | Chiều rộng của dải ngăn cách giữa các bước (pixel). | | [mode] | 'center' \| 'left' \| 'right' | 'center' | Chế độ hiển thị của breadcrumb. | | [(steps)] | Array<ITabBreadCrumb> | undefined | Danh sách các bước breadcrumb. | | [classInclude] | string | undefined | Class CSS bổ sung cho container. | | [(completedIndex)] | Array<number> | [] | Danh sách index các bước đã hoàn thành. | | [backgroundWhite] | boolean | undefined | Có sử dụng nền trắng cho container không. |

Outputs

| Property | Type | Description | | ---------------------- | --------------------------------- | ---------------------------------------------- | | (outStepSelected) | ITabBreadCrumbSelected | Emit khi người dùng click vào một bước. | | (outFunctionControl) | IBreadCrumbFunctionControlEvent | Emit object chứa các hàm điều khiển component. |

FunctionsControl Methods

| Method | Parameters | Description | | -------------------- | ----------------------------------- | ---------------------------------------------- | | setSelectedStep | index: number | Thiết lập bước đang được chọn. | | setCompletedStep | complete: boolean, index: number | Đánh dấu một bước là đã hoàn thành hoặc chưa. | | setStepDisable | steps: Array<number> | Thiết lập danh sách các bước bị vô hiệu hóa. | | getCompleteIndex | - | Trả về danh sách index các bước đã hoàn thành. | | getSelectedIndex | - | Trả về index bước hiện tại đang được chọn. | | resetCompleteIndex | resetAll: boolean, index?: number | Reset trạng thái hoàn thành của các bước. |

Types & Interfaces

export interface ITabBreadCrumb {
  number: number;
  title: string;
  valid?: boolean;
  disable?: boolean;
  classInclude?: string;
}

export interface ITabBreadCrumbSelected {
  index: number;
}

export interface IBreadCrumbFunctionControlEvent {
  setSelectedStep: (index: number) => Promise<void>;
  setCompletedStep: (complete: boolean, index: number) => Promise<void>;
  setStepDisable: (steps: Array<number>) => Promise<void>;
  getCompleteIndex: () => Promise<Array<number>>;
  getSelectedIndex: () => Promise<number>;
  resetCompleteIndex: (resetAll: boolean, index?: number) => Promise<void>;
}

Công nghệ

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

License

MIT