Announcement

Ankündigung

Beispiel für die Announcement-Komponente. Die Announcement-Komponente dient dazu, wichtige Ankündigungen oder Nachrichten prominent auf einer Seite darzustellen. Sie eignet sich besonders für zeitlich begrenzte Hinweise, Updates oder Breaking News.

Codebeispiel

<Announcement
  badge="NEW"
  text="Neue Features verfügbar!"
  href="/features"
/>
Wiki-Dokumentation Quellcode

Mit Slot-Inhalt

Announcement mit Slot

Die Announcement-Komponente unterstützt auch Slot-Inhalte für komplexere Strukturen.

Codebeispiel

<Announcement badge="INFO">
Wichtige Information: <strong>Neue Features</strong> sind jetzt verfügbar!
</Announcement>
Wiki-Dokumentation Quellcode

Ohne Badge

Announcement ohne Badge

Der Badge kann weggelassen werden, indem badge als leerer String übergeben wird.

Codebeispiel

<Announcement
badge=""
text="Einfache Ankündigung ohne Badge"
/>
Wiki-Dokumentation Quellcode

Mit anpassbarem Styling

Announcement mit Custom Classes

Zusätzliche Tailwind-Klassen können über die class, badgeClass und textClass Props gesetzt werden.

Codebeispiel

<Announcement
badge="NEW"
text="Custom styled announcement"
class="bg-blue-500 text-white"
badgeClass="bg-yellow-400 text-black"
textClass="font-bold"
/>
Wiki-Dokumentation Quellcode

Mit GitHub Stars Badge

Announcement mit GitHub Stars

Optional kann ein GitHub Stars Badge rechts angezeigt werden.

Codebeispiel

<Announcement
text="Star uns auf GitHub!"
showGitHubStars={true}
githubOrg="ThinkportRepo"
githubStarsTitle="View ThinkportRepo on GitHub"
/>
Wiki-Dokumentation Quellcode

Variant: Primary

Blaue Variante

Primary-Variante mit blauem Hintergrund für wichtige Ankündigungen.

Codebeispiel

<Announcement
variant="primary"
badge="NEW"
text="Wichtige Neuigkeit verfügbar!"
href="/news"
/>
Wiki-Dokumentation Quellcode

Variant: Secondary (Standard)

Dunkelgraue Variante

Secondary-Variante mit dunkelgrauem Hintergrund - die Standard-Variante.

Codebeispiel

<Announcement
variant="secondary"
badge="UPDATE"
text="Standard Ankündigung mit dunkelgrauem Hintergrund"
/>
Wiki-Dokumentation Quellcode

Variant: Info

Hellblaue Variante

Info-Variante mit hellblauem Hintergrund für informative Nachrichten.

Codebeispiel

<Announcement
variant="info"
badge="INFO"
text="Informative Nachricht für Benutzer"
/>
Wiki-Dokumentation Quellcode

Variant: Warning

Gelbe Variante

Warning-Variante mit gelbem Hintergrund für Warnungen und wichtige Hinweise.

Codebeispiel

<Announcement
variant="warning"
badge="WARNUNG"
text="Wichtiger Hinweis: Bitte beachten Sie diese Information"
/>
Wiki-Dokumentation Quellcode

Variant: Success

Grüne Variante

Success-Variante mit grünem Hintergrund für Erfolgsmeldungen.

Codebeispiel

<Announcement
variant="success"
badge="ERFOLG"
text="Aktion erfolgreich abgeschlossen!"
/>
Wiki-Dokumentation Quellcode