Infragistics Ignite UI for Angular UI Navigation Controls

InfragisticsUI-NavigationssteuerungenJavaScript

Angular-Komponenten für reaktionsfähige und anpassbare Navigationssteuerungen.

  • Enthält einen Seitennavigations-Drawer mit responsiven und Mini-Modi.
  • Bietet eine obere Navbar für App-Header und Schnellaktionen.
  • Unterstützt hierarchische Navigation und die Integration mit dem Angular Router.
Infragistics logo

Preise ab:

Wird geladen...
Verfügbar in
Infragistics Ignite UI for AngularWird geladen
Infragistics Ignite UIWird geladen
Infragistics ProfessionalWird geladen
Infragistics UltimateWird geladen
Brauchen Sie Hilfe bei der Auswahl? Sehen Sie So kaufen Sie und Spezifikationen
Infragistics Ignite UI for Angular UI Navigation Controls Produktbild
Infragistics Ignite UI for Angular UI Navigation Controls bietet Navigationskomponenten, die Angular-Anwendungen mit anpassungsfähigen Navigationslösungen erweitern. Der Navigation Drawer bietet ausziehbare und angeheftete Seitenmenüs mit anpassbarem Inhalt und Touch-Gesten, während die Navbar eine Header-Komponente zum Anzeigen der Benutzerposition und von Schaltflächen für Schnellaktionen bereitstellt. Zusammen unterstützen sie komplexe Navigationsmuster, hierarchische Menüs und eine nahtlose Router-Integration für reibungslose Benutzererlebnisse.

Navigation Drawer Komponente

Ein Container für die Seitennavigation, der über Inhalte gleiten oder inline angeheftet werden kann. Er unterstützt den responsiven Moduswechsel, eine Mini-Variante für kompakten Zugriff und anpassbare Menüeinträge mit Standardformatierungsoptionen.

Drawer-Interaktion und Anpassung

Swipe-Gesten werden für das Öffnen und Schließen auf Touch-Geräten unterstützt. Inhaltstemplates ermöglichen eine umfangreiche Anpassung, einschließlich Headern und der Formatierung aktiver Elemente über Direktiven, mit einer API zur programmatischen Steuerung des Drawer-Zustands.

Responsive und angeheftete Modi

Wechselt automatisch zwischen dem hervorgehobenen Overlay-Modus auf kleineren Bildschirmen und dem angehefteten Inline-Modus auf größeren Viewports. Entwickler können den Pin-Schwellenwert und das Layout steuern, um den Anforderungen des App-Designs gerecht zu werden.

Unterstützung für Mini-Variante

Bietet einen schmalen Drawer-Zustand, der Navigationssymbole beim Einklappen sichtbar hält und so die Zugänglichkeit sowie die schnelle Auswahl in persistenten Navigations-Setups gewährleistet.

Navbar-Komponente

Eine Anwendungs-Headerleiste, die die aktuelle Benutzerposition anzeigt, eine Aktion zum Zurücknavigieren bereitstellt und Symbolschaltflächen für gängige Aktionen wie Suche oder Favoriten enthält.

Benutzerdefinierte Navbar-Aktionen und Titel

Ermöglicht das Hinzufügen benutzerdefinierter Templates für Aktionsschaltflächen und Titel. Unterstützt Material Icons standardmäßig mit einfacher Integration für benutzerdefinierten Inhalt und Interaktions-Hooks.

Angular Router Integration

Navigationsobjekte können mit Angular Router-Routen verknüpft werden und unterstützen die Erkennung des aktiven Status sowie die Navigation über routerLink-Direktiven für ein konsistentes Routing-Verhalten der App.

Themeing und Styling

Beide Komponenten unterstützen fortgeschrittenes Sass-Themeing, sodass Entwickler Farben, Hintergründe und Interaktionszustände mithilfe vordefinierter Theme-Funktionen und CSS-Variablen anpassen können.

Unterstützung hierarchischer Navigation

Der Navigation Drawer kann mehrstufige Menüstrukturen mithilfe von Tree-Komponenten einbinden und so komplexe Navigationsabläufe ermöglichen, die durch Routendaten oder benutzerdefinierte Datenquellen gesteuert werden.

Produktkompatibilität

Überprüfen Sie die untenstehenden Details, um sicherzustellen, dass dieses Produkt in Ihrer Umgebung unterstützt wird.

Komponententyp

  • JavaScript

JavaScript-Plattform

  • Angular
  • Vanilla JavaScript