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

Component hiển thị tiến trình dạng thanh (stack hoặc separate) với hỗ trợ Steps linh hoạt.

Giới thiệu

LibsUiComponentsProcessBarStandardComponent là một standalone Angular component được thiết kế để hiển thị các thanh tiến trình (progress bar). Component hỗ trợ 2 chế độ chính: Stack (các bước nối liền nhau) và Separate (các bước tách rời). Đặc biệt component tích hợp sâu với Angular Signals để tối ưu hóa hiệu năng render.

Tính năng

• ✅ 2 Chế độ hiển thị: Stack & Separate
• ✅ Hỗ trợ Nested Signals cho các bước (Steps)
• ✅ Auto Calculate Percentage
• ✅ Custom Label & Styling cho từng bước
• ✅ OnPush Change Detection
• ✅ Standalone Component
• ✅ Angular Signals Native

Khi nào sử dụng

• Hiển thị tiến trình download/upload.
• Hiển thị trạng thái của quy trình đa bước (Stack).
• Hiển thị so sánh các chỉ số (Separate).
• Hiển thị dashboard widget với dữ liệu realtime.

Cài đặt

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

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

Import

import { LibsUiComponentsProcessBarStandardComponent } from '@libs-ui/components-process-bar-standard';

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

Ví dụ

Basic Stack

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

// Define Steps
const step1 = signal<IProcessBarStandardStepInterface>({ value: 30, color: '#EF4444' });
const step2 = signal<IProcessBarStandardStepInterface>({ value: 50, color: '#3B82F6' });

// Config
readonly config = signal<IProcessBarStandardInterface>({
  width: '100%',
  totalValue: 100,
  mode: 'stack',
  steps: signal([step1, step2])
});

API

libs_ui-components-process_bar-standard

Inputs

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

IProcessBarStandardInterface

| Property | Type | Description | | ----------------- | ---------------------------------------- | ------------------------------------------------ | | width | string | Chiều rộng component (vd: '100%'). | | height | string | Chiều cao component. | | backgroundColor | string | Màu nền của container (unused in separate mode). | | radius | number | Độ bo góc (px). | | totalValue | number | Giá trị tổng để tính phần trăm. | | mode | 'stack' \| 'separate' | Chế độ hiển thị. | | steps | WritableSignal<WritableSignal<Step>[]> | Array các steps (Signals). | | classInclude | string | Custom class cho container. | | showPercent | boolean | Hiển thị phần trăm (Separate mode). |

IProcessBarStandardStepInterface

| Property | Type | Description | | -------------- | --------- | ----------------------------------------- | | value | number | Giá trị của bước. | | color | string | Màu sắc của bước. | | label | string | Label hiển thị. | | classInclude | string | Custom class cho step bar. | | classLabel | string | Custom class cho label. | | showPercent | boolean | Override hiển thị phần trăm cho step này. |

Types & Interfaces

import { IProcessBarStandardInterface, IProcessBarStandardStepInterface } from '@libs-ui/components-process-bar-standard';

Styling

Component sử dụng inline styles cho các thuộc tính dynamic (width, height, color) và TailwindCSS cho layout cơ bản.

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/standard (tùy thuộc vào config routing của bạn).