HeaderPanel

HeaderPanel in Storybook

Beispiele

Im Abschnitt Verwendung finden Sie Informationen über die richtige Gestaltung eines HeaderPanels und die verschiedenen verfügbaren Konfigurationsoptionen.

Einfaches Beispiel

Die Komponente HeaderPanel ist ein Wrapper, der angibt, aus welchen Komponenten die Seitenkopfzeile besteht.

<HeaderPanel>
    <h1>Sample heading text</h1>
</HeaderPanel>

Verwendung

Überblick

Die Kopfzeile erstreckt sich über die gesamte Breite des Viewports und ist das oberste Element im Browserfenster. Sie bleibt während der gesamten Produkterfahrung bestehen und gewährleistet die Konsistenz bei der Navigation. Als flexible zusammengesetzte Komponente kann die Kopfzeile je nach Anwendungsfall verschiedene Elemente enthalten. Derzeit verwenden wir als Ausgangspunkt das Kopfzeilen-Muster, um die Ausrichtung und Konsistenz zwischen den Produkten aufrechtzuerhalten.

Zu verwenden

Die globale Kopfzeile ist ein obligatorisches Element in jeder Anwendung, das eine konsistente Navigation und eine einheitliche Benutzererfahrung über alle Produkte hinweg gewährleistet.

Aufbau

Die Kopfzeile besteht aus den folgenden Elementen:

1. Produktname/Logo: Steht für die Marke oder Anwendung.
2. Suchleiste: Ermöglicht es Benutzern, Inhalte schnell zu finden.
3. Globale Aktionen: Können Hilfe, Benachrichtigungen, Einstellungen und Benutzerprofile umfassen.

Nicht alle Elemente sind erforderlich. Fügen Sie nur das hinzu, was für Ihren spezifischen Anwendungsfall notwendig ist. Die Kopfzeile 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.

Best Practices

• Die globale Kopfzeile muss immer einen Produktnamen enthalten. Der Produktname in der Kopfzeile und im Navigationsbereich muss identisch und großgeschrieben sein, wie ein Titel.
• Das Guidewire-Logo „G“ fungiert als Schaltfläche. Wenn Sie darauf klicken, werden Benutzer zur Startseite weitergeleitet.

Reaktionsfähigkeit

• Die globale Kopfzeile ist für Standard-Desktop- und Tablet-Displays optimiert.
• Auf Tablets sind das Guidewire-Logo „G“ und der Produktname zentriert und die Kontexttextzeichenfolge ist ausgeblendet. Benutzer müssen auf das Einstellungssymbol klicken, um die Kontextinformationen in einem Bereich anzuzeigen.

Verwandte Elemente

• Unterkopfzeile
• Seitenbereich
• Tool-Seitenbereich
• Fußzeile

Code

<HeaderPanel>
    <h1>Sample heading text</h1>
</HeaderPanel>

Importanweisung

import { HeaderPanel } 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

node

Beschreibung

Content of the HeaderPanel.

className

Typ

string

Beschreibung

CSS class name for this component.

position

Typ

'relative'| 'fixed' | 'sticky'

Beschreibung

Position of the HeaderPanel. 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. If 'sticky', it will render based on where the component is positioned in the page code, but when your view passes under the header it will remain at the top of the window.

Standardwert

'relative'

Hooks

Für HeaderPanel sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für HeaderPanel.

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.

Änderungsprotokoll

10.10.0

HeaderPanel-Komponente hinzugefügt.