Angular パンくずリストコンポーネント | ng-hub-ui-breadcrumbs
Router 連携、カスタムテンプレート、RTL 対応、柔軟なスタイルトークンを備えた Angular パンくずリストコンポーネント。
概要
チームがこのライブラリを探す理由
ルートのコンテキストが重要で、Angular Router・テンプレート・階層的なナビゲーションパスと連携するナビゲーション補助が必要なとき、この Angular パンくずリストを使ってください。
インストール
npm install ng-hub-ui-breadcrumbsジャンプ
最適な用途
- ドキュメントサイト
- 管理パネル
- 多階層アプリ
- ルートを認識するナビゲーション
について breadcrumbs
ng-hub-ui-breadcrumbs は、管理パネル・ドキュメントサイト・多階層プロダクト向けに、ルートを認識するパンくずコンポーネントを Angular アプリケーションに提供します。ナビゲーションの深さが増し、戻るボタン以上の案内をユーザーが必要とするときに役立ちます。
機能ガイド
コア機能
自動的なルート検出とナビゲーションパス表示を備えた、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