Angular パンくずリストコンポーネント | ng-hub-ui-breadcrumbs
Router 連携、カスタムテンプレート、RTL 対応、柔軟なスタイルトークンを備えた Angular パンくずリストコンポーネント。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
Basic Breadcrumbs
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.
コード
Dynamic Breadcrumbs
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.
コード
Custom Templates
Breadcrumbs - Custom Templates
Custom template usage for rendering breadcrumb items with custom styling
The hubBreadcrumbItem directive allows custom rendering of each element.
コード
Icons Breadcrumbs
Breadcrumbs - Iconos
Renderizado de iconos definidos en los datos de la ruta usando una plantilla personalizada.
コード
RTL Breadcrumbs
Breadcrumbs - RTL
Soporte para idiomas con lectura de derecha a izquierda (RTL).
コード
Truncation & Tooltip
Breadcrumbs - Truncation & Tooltip
Enable truncateItems to clip long labels with an ellipsis; hover a clipped item to read the full text.
Each label is capped at --hub-breadcrumb-max-item-width (12rem). Only the items that overflow get a tooltip.