Компонент 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.
Код
Код
Import:
Template:
Component:
Динамическое содержимое
Динамическое разрешение содержимого 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.
Код
Код
Import:
Template:
Component:
Шаблоны и настройка
Широкие возможности настройки с пользовательскими шаблонами для элементов 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.
Код
Код
Import:
Template:
Component:
Расширенные возможности
Расширенная функциональность, включая поддержку иконок и совместимость с 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.
Код
Код
Import:
Template:
Component:
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).
Код
Код
Import:
Template:
Component:
Ключевые возможности
Последние изменения
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