مكوّن Breadcrumbs لـ Angular | ng-hub-ui-breadcrumbs

مكوّن breadcrumbs لـ Angular مع التكامل مع Router وقوالب مخصّصة ودعم RTL ورموز تنسيق مرنة.

نظرة عامة

لماذا تبحث الفِرَق عن هذه المكتبة

استخدم breadcrumbs هذه لـ Angular عندما يكون سياق المسار مهمًّا وتحتاج إلى مساعدة تنقّل تعمل مع Angular Router والقوالب ومسارات التنقّل المنظّمة.

التثبيت

npm install ng-hub-ui-breadcrumbs

انتقل إلى

مثالي لـ

  • مواقع التوثيق
  • لوحات الإدارة
  • التطبيقات متعددة المستويات
  • التنقّل الواعي بالمسار

حول breadcrumbs

يمنح ng-hub-ui-breadcrumbs تطبيقات Angular مكوّن breadcrumb واعيًا بالمسار للوحات الإدارة ومواقع التوثيق والمنتجات متعددة المستويات. وهو مفيد عندما يزداد عمق التنقّل ويحتاج المستخدمون إلى توجيه أكثر مما يقدّمه زر الرجوع.

أدلّة الميزات

الميزات الأساسية

وظائف breadcrumbs الأساسية مع الكشف التلقائي عن المسار وعرض مسار التنقل.

أمثلة:
Basic Breadcrumbs

Simple breadcrumbs displaying navigation path from route configuration

Breadcrumbs - Basic Setup

Basic usage of breadcrumbs component showing current route based on route data

Items are generated from the data.breadcrumb configuration of active routes.

الشفرة

الكود
الاستيراد:
القالب:
المكوّن:

المحتوى الديناميكي

حلّ محتوى breadcrumbs الديناميكي من بيانات المسار والمحلِّلات مع دعم العناصر النائبة.

أمثلة:
Dynamic Breadcrumbs

Breadcrumbs with dynamic content from route resolvers and data

Breadcrumbs - Dynamic Data

Dynamic breadcrumbs with placeholders resolved from route data and resolvers

The last item uses the template "Dynamic: {name}" and is resolved with route data.

الشفرة

الكود
الاستيراد:
القالب:
المكوّن:

القوالب والتخصيص

خيارات تخصيص غنية مع قوالب مخصصة لعناصر breadcrumbs وتنسيق محسَّن.

أمثلة:
Custom Templates

Custom breadcrumb item templates with enhanced styling and icons

Breadcrumbs - Custom Templates

Custom template usage for rendering breadcrumb items with custom styling

The hubBreadcrumbItem directive allows custom rendering of each element.

الشفرة

الكود
الاستيراد:
القالب:
المكوّن:

الميزات المتقدمة

وظائف محسَّنة تشمل دعم الأيقونات وتوافق تخطيط RTL للتطبيقات الدولية.

أمثلة:
Icons Breadcrumbs

Breadcrumb items with custom icons rendered from route data using custom templates

Breadcrumbs - Iconos

Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.

الشفرة

الكود
الاستيراد:
القالب:
المكوّن:
RTL Breadcrumbs

Right-to-left layout support with automatic divider flipping for international applications

Breadcrumbs - RTL

Soporte para idiomas con lectura de derecha a izquierda (RTL).

الشفرة

الكود
الاستيراد:
القالب:
المكوّن:

الميزات الرئيسية

التغييرات الأخيرة

Version 20.0.2 - 9/17/24, 12:00 AM

added: Comprehensive documentation page with functional examples

added: Basic breadcrumbs example with automatic route detection

added: Dynamic breadcrumbs example with placeholder resolution from route data

added: Custom templates example with enhanced styling and icons

added: Icons breadcrumbs example with visual indicators

added: RTL support example for right-to-left layouts

added: CSS variables styling example with complete theming options

added: Live functional examples in documentation with syntax highlighting

changed: Updated documentation structure with dedicated overview, API, and examples sections

changed: Enhanced code examples with proper TypeScript and HTML highlighting

changed: Improved example organization by functionality categories

Version 20.0.1 - 3/20/24, 12:00 AM

added: Full Angular 21 compatibility

added: Enhanced automatic route detection

added: Improved Bootstrap 5 styling compatibility

fixed: Performance optimizations for route data resolution

changed: Comprehensive README documentation

Version 20.0.0 - 1/15/24, 12:00 AM

changed: Migrated to Angular 21 with standalone components

added: Automatic breadcrumb generation from route configuration

added: Custom template support with hubBreadcrumbItem directive

added: Dynamic content resolution from route resolvers

added: RTL layout support for international applications

added: CSS custom properties for complete theming control