@libs-ui/components-process-bar-steps

Component hiển thị quy trình theo từng bước (stepper), hỗ trợ custom label và state.

Giới thiệu

LibsUiComponentsProcessBarStepsComponent là một standalone Angular component dùng để hiển thị các thanh tiến trình dạng bước (stepper). Nó cực kỳ hữu ích cho việc hiển thị trạng thái đơn hàng, quy trình wizard, hoặc lộ trình. Component hỗ trợ 2 chế độ cấu hình: Đơn giản (Simple) và Nâng cao (Advanced).

Tính năng

• ✅ Simple Mode: Cấu hình nhanh số lượng bước và bước hiện tại.
• ✅ Advanced Mode: Tùy chỉnh chi tiết từng bước (Label, Color, State) sử dụng Signals.
• ✅ Customizable Layout: Hỗ trợ vị trí Label (top, bottom, inner) và Alignment (start, center, end).
• ✅ Reactive: Tích hợp chặt chẽ với Angular Signals.
• ✅ OnPush Change Detection: Tối ưu hiệu năng.

Khi nào sử dụng

• Hiển thị trạng thái đơn hàng (Order Tracking).
• Hiển thị các bước trong quy trình đăng ký/wizard.
• Hiển thị lộ trình học tập hoặc milestones.

Cài đặt

# npm
npm install @libs-ui/components-process-bar-steps

# yarn
yarn add @libs-ui/components-process-bar-steps

Import

import { LibsUiComponentsProcessBarStepsComponent } from '@libs-ui/components-process-bar-steps';

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

Ví dụ

Simple Config

<libs_ui-components-process_bar-steps [config]="config" />

readonly config = signal<IProcessBarStepConfigInterface>({
  simpleConfig: signal({
    totalStep: 4,
    currentStep: 2,
    currentStepColor: '#3B82F6',
    stepCompletedColor: '#10B981'
  }),
  widthStep: '60px'
});

Advanced Config

const step1 = signal({ label: 'Step 1', processCompleted: true });
const step2 = signal({ label: 'Step 2', isCurrentProcess: true });

readonly config = signal<IProcessBarStepConfigInterface>({
  advancedConfig: signal([step1, step2]),
  positionLabel: 'bottom'
});

API

libs_ui-components-process_bar-steps

Inputs

| Property | Type | Default | Description | | ---------- | --------------------------------------------- | ---------- | ------------------------------------------- | | [config] | InputSignal<IProcessBarStepConfigInterface> | Required | Object configuration chứa toàn bộ settings. |

IProcessBarStepConfigInterface

| Property | Type | Description | | --------------------- | ------------------------------------------ | ------------------------------------------ | | simpleConfig | WritableSignal<SimpleConfig> | Cấu hình đơn giản. | | advancedConfig | WritableSignal<Signal<AdvancedConfig>[]> | Cấu hình nâng cao (array các signals). | | positionLabel | 'top' \| 'bottom' \| 'inner' | Vị trí hiển thị label. | | justifyLabel | 'start' \| 'center' \| 'end' | Căn lề cho label và nội dung. | | widthStep | string | Chiều rộng mỗi bước (vd: "80px"). | | heightStep | string | Chiều cao mỗi bước. | | backgroundColorStep | string | Màu nền mặc định cho các bước chưa active. | | radiusStep | number | Bo góc (px). | | classInclude | string | Custom class cho container. |

IProcessBarStepSimpleConfigInterface

| Property | Type | Description | | -------------------- | -------- | ------------------------------------------------ | | totalStep | number | Tổng số bước. | | currentStep | number | Bước hiện tại (1-based index). | | completedStep | number | Các bước đã hoàn thành (mặc định = currentStep). | | currentStepColor | string | Màu của bước hiện tại. | | stepCompletedColor | string | Màu của các bước đã hoàn thành. |

IProcessBarStepAdvancedConfigInterface

| Property | Type | Description | | ----------------------- | --------- | --------------------------- | | label | string | Label hiển thị. | | processCompleted | boolean | Trạng thái đã hoàn thành. | | processCompletedColor | string | Màu khi hoàn thành. | | isCurrentProcess | boolean | Trạng thái đang thực hiện. | | currentProcessColor | string | Màu khi đang thực hiện. | | classIncludeStep | string | Custom class cho từng bước. | | classLabel | string | Custom class cho label. |

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/process-bar/steps