Inline Badge Editor-Rezept
Füge mit dem Inline Badge Editor-Rezept ein kleines, inline gesetztes Großbuchstaben-Badge hinter bestimmten Elementen in einem Kadence Row Layout oder einer Section hinzu.
Was das Inline Badge Rezept macht
Inline Badge fügt ein kleines Badge in Großbuchstaben direkt hinter ausgewählten Elementen innerhalb eines Kadence Row Layout- oder Section-Blocks ein.
Das Rezept nutzt das CSS-Pseudo-Element ::after, um:
- jedes Kindelement innerhalb der Row oder Section zu targeten, das eine von dir definierte Klasse nutzt,
- einen kurzen, in Großbuchstaben gesetzten Text-Badge als generierten Inhalt hinter diesem Element anzuhängen,
- das Badge inline zu halten, damit es natürlich mit dem umgebenden Text mitfließt.
Es handelt sich um ein Editor Utility-Rezept, das du über X-Bar anwendest und auf einen einzelnen Kadence Row Layout- oder Section-Block beschränkst.
Inline Badge enthält Platzhalter-Werte. Nachdem du das Rezept eingefügt hast:
- Ersetze
.replace-me-classdurch die tatsächliche Klasse des Kindelements, das das Badge erhalten soll. - Ersetze den Platzhalter-String bei
contentdurch deinen Badge-Text, zum Beispiel"NEW","BETA"oder"PRO".
Wo du das Rezept im Block-Editor anwendest
Hänge Inline Badge an einen bestimmten Kadence Row Layout- oder Section-Block, damit es nur diesen Block beeinflusst und nicht die gesamte Seite.
- Scope: Das Rezept nutzt das Kadence-Selector-Keyword, um das CSS auf die ausgewählte Row Layout- oder Section-Instanz zu beschränken.
- Targeting: Innerhalb dieses Blocks sucht das CSS nach Kindelementen mit der von dir angegebenen Klasse und hängt dann das Inline Badge hinter diese Elemente.
Inline Badge mit X-Bar hinzufügen
Nutze diesen Ablauf, wenn du einer Row oder Section ein Inline Badge hinzufügen möchtest.
Kadence Row Layout oder Section Block auswählen
Klicke im Editor den Kadence Row Layout- oder Section-Block an, der das Inline Badge enthalten soll. Lass diesen Block ausgewählt, damit X-Bar weiß, an welchen Block das Rezept angehängt wird.
X-Bar öffnen und den CSS-Recipes Editor wählen
Öffne X-Bar, während der Block ausgewählt ist, und wechsle in den Bereich, der für CSS-Rezepte vorgesehen ist. Dieser Editor hängt Styles direkt an den ausgewählten Block an und scoped sie mit dem Kadence-Selector-Keyword.
Inline Badge Rezept einfügen
Füge den Inline Badge Rezept-Code in den X-Bar Editor ein. Das Rezept nutzt ::after auf einem Selector, der das Kadence-Keyword enthält, sodass nur Kindelemente innerhalb dieser Row oder Section betroffen sind.
Ziel-Klasse und Badge-Text anpassen
Aktualisiere die Platzhalter-Werte im Rezept:
- Ändere
.replace-me-classin die tatsächliche Klasse des Kindelements, das das Badge erhalten soll (zum Beispiel eine Überschrift, ein Link oder ein Label). - Ändere den Wert von
contentin deinen Badge-Text in Großbuchstaben, zum Beispiel"NEW","SALE"oder"PRO".
Klasse am Zielelement setzen und Vorschau prüfen
Bearbeite das entsprechende Kindelement im gleichen Kadence-Block und füge dort die Klasse ein, die du im Rezept verwendet hast. Öffne die Vorschau, um zu prüfen, ob das Badge inline hinter dem Element erscheint und deinen Text korrekt anzeigt.
Wie Inline Badge funktioniert
Inline Badge basiert auf generiertem Inhalt und scoped Selectors:
- Du hängst das Rezept über X-Bar an den Kadence Row Layout- oder Section-Block an und nutzt das Kadence-Selector-Keyword, damit nur dieser spezifische Block betroffen ist.
- Innerhalb dieses Blocks targetet der Selector jedes Kindelement, das die konfigurierte Klasse verwendet, statt einen bestimmten Elementtyp hart zu codieren.
- Das Pseudo-Element
::afterfügt den Badge-Text in Großbuchstaben als generierten Inhalt direkt hinter dem Element ein. - Weil das Badge inline bleibt, folgt es dem gleichen Zeilenfluss wie der Text und sitzt direkt hinter dem Wort oder Label, das du markiert hast.
Auf diese Weise bleibt dein Markup schlank und du erhältst dennoch flexible, pro Element gesteuerte Badges im Editor.
Verwandte Editor-Rezepte und Ressourcen
Nutze diese verwandten Rezepte und Dokumente, um Inline Badge mit anderen Editor Utilities zu kombinieren.
Alle CSS-Rezepte
Überblick über alle verfügbaren X-Bar CSS-Rezepte, inklusive Frontend- und Editor-Utilities.
Container Badge (::before)
Füge ein Badge hinzu, das direkt an den Container selbst angehängt wird, indem du das Pseudo-Element ::before verwendest.
Gradient Section Border (::before)
Wende einen dekorativen Gradient-Rahmen rund um ein Kadence Row Layout oder eine Section an.
Separator Line
Erzeuge ein Separator-Line-Utility für klarere inhaltliche Trennungen im Editor.
Last updated today
Built with Documentation.AI