مكوّن 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