FooterPanel
Beispiele
Im Abschnitt Verwendung finden Sie Informationen über die richtige Gestaltung eines FooterPanels und die verschiedenen verfügbaren Konfigurationsoptionen.
Einfaches Beispiel
Die FooterPanel-Komponente ist ein Wrapper, der angibt, aus welchen Komponenten die Fußzeile einer Seite besteht.
<FooterPanel>
<p>Sample footer text</p>
</FooterPanel>
Verwendung
Überblick
Die Fußzeile ist eine persistente UI-Komponente, die sich am unteren Rand des Fensters befindet. Sie dient als ergänzender Navigations- oder Funktionsbereich, in dem Benutzer zusätzliche Steuerelemente, sekundäre Navigationslinks oder Kontextinformationen bereitgestellt werden, die für den aktuellen Seiten- oder Anwendungsstatus relevant sind.
Zu verwenden
- Um Links zu wichtigen, aber nicht primären Seiten bereitzustellen, z. B. „Über uns“, „Karriere“, „Hilfe-Center“, „Blog“ oder „Kontakt“.
- Wenn Benutzer eine schnelle Möglichkeit benötigen, um zu häufig gesuchten Abschnitten zu navigieren, ohne wieder nach oben scrollen zu müssen.
- Wenn die Seite Datenschutzrichtlinien, Nutzungsbedingungen, Erklärungen zur Barrierefreiheit oder Haftungsausschlüsse erfordert, ist eine Fußzeile der beste Ort, um sie zu platzieren.
Aufbau
- Fußzeilen-Container: Die Fußzeilenkomponente wird am unteren Rand der Seite positioniert und dient als einheitlicher Bereich für die Anzeige von sekundären Inhalten.
Best Practices
- Stellen Sie sicher, dass die Fußzeile leicht und nicht aufdringlich ist.
- Fügen Sie nur das hinzu, was für Ihren spezifischen Anwendungsfall notwendig ist. Die Fußzeile ist eine offene und flexible Komponente, die je nach Anwendungsfall verschiedene Elemente aufnehmen kann. Teams können es anpassen, indem sie bei Bedarf verschiedene Komponenten, Tools und Funktionen hinzufügen und gleichzeitig eine optimierte Erfahrung beibehalten.
Anwendungsbeispiele
Das folgende Beispiel mit Kontaktinformationen und Links zu rechtlichen Inhalten verdeutlicht den offenen und flexiblen Charakter der Fußzeile.
Verwandte Elemente
Code
<FooterPanel>
<h1>Sample footer text</h1>
</Footer>
Importanweisung
import { FooterPanel } 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 HeaderPanel.
className- Typ
stringBeschreibungCSS class name for this component.
Hooks
Für FooterPanel sind keine Hooks verfügbar.
Übersetzungsschlüssel
Es gibt keine Übersetzungen für FooterPanel.
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.