SubheaderPanel
Beispiele
Im Abschnitt Verwendung finden Sie Informationen über die richtige Gestaltung eines SubheaderPanel und die verschiedenen verfügbaren Konfigurationsoptionen.
Einfaches Beispiel
Die Komponente SubheaderPanel ist ein Wrapper, der angibt, aus welchen Komponenten die Seitenkopfzeile besteht.
<SubheaderPanel>
<h1>Sample subheading text</h1>
</SubheaderPanel>
Verwendung
Die Unterkopfzeile ist eine sekundäre Navigations- oder Informationskomponente, die unter der Kopfzeile angezeigt wird. Sie bietet Benutzern zusätzlichen Kontext, Filter, Breadcrumbs oder Aktionen im Zusammenhang mit der aktuellen Seite oder dem aktuellen Abschnitt. Die Unterkopfzeile verbessert die Benutzerfreundlichkeit, indem sie relevante Steuerelemente bietet und gleichzeitig eine übersichtliche Benutzeroberfläche sichert.
Zu verwenden
Die Seite beinhaltet Filter, Sortierungen oder Schnellaktionen.
Nicht zu verwenden
- Die Hauptkopfzeile stellt bereits alle notwendigen Informationen und Steuerelemente bereit.
- Der Inhalt innerhalb der Unterkopfzeile ist zu komplex.
Aufbau
- Unterkopfzeilen-Container: Die Hauptstruktur, die Unterkopfzeilenelemente enthält. Die Unterkopfzeile befindet sich immer unterhalb der Hauptkopfzeile.
- Registerkarten (falls zutreffend): Ermöglicht es Benutzern, zwischen verschiedenen Abschnitten oder Ansichten innerhalb der Unterkopfzeile zu wechseln.
Nicht alle Elemente sind erforderlich. Fügen Sie nur das hinzu, was für Ihren spezifischen Anwendungsfall notwendig ist. Die Unterkopfzeile ist eine offene und flexible Komponente, die je nach Anwendungsfall mit verschiedenen Elementen versehen werden kann. Teams können es anpassen, indem sie bei Bedarf verschiedene Komponenten, Tools und Funktionen hinzufügen und gleichzeitig eine optimierte Erfahrung beibehalten.
Anwendungsbeispiele
Beispiele für die Verwendung von Unterkopfzeilen, die zeigen, wie offen und flexibel diese sind.
Unterkopfzeile mit Registerkarten
Unterkopfzeile mit Schaltflächen
Verwandte Elemente
Code
<SubheaderPanel>
<h1>Sample subheading text</h1>
</SubheaderPanel>
Importanweisung
import { SubheaderPanel } from '@jutro/components';
Komponentenvertrag
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
Eigenschaften
childrenerforderlich- Typ
nodeBeschreibungContent of the SubheaderPanel.
className- Typ
stringBeschreibungCSS class name for this component.
position- Typ
'relative'| 'fixed' | 'sticky'BeschreibungPosition of the SubheaderPanel. If 'relative', then it will render based on where the component is positioned in the page code. If 'fixed', it will always render at top of the page but below a HeaderPanel component if present. If 'sticky', it will render based on where the component is positioned in the page code, but when your view passes under the subheader it will remain at the top of the window but below a HeaderPanel, if present.
Standardwert'relative'
Hooks
Für SubheaderPanel sind keine Hooks verfügbar.
Übersetzungsschlüssel
Es gibt keine Übersetzungen für SubheaderPanel.
Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.
Escape Hatches
Weitere Informationen finden Sie in unserer Dokumentation über Escape-Hatches.