Corner Ribbon Hilfsfunktionen

Die corner_ribbon-Komponente zeigt ein dekoratives, diagonales Textband an, welches in einer der Ecken des Browsers positioniert werden kann. Sie eignet sich ideal zum Hervorheben neuer Funktionen, zum Anzeigen von Statusanzeigen oder zum Hinzufügen von Werbe-Badges.

WCAG AA

Funktionen

Position: Eine der vier Ecken des Browsers.
Farbvarianten: primary, secondary, info, success, warning, und danger.
Nicht blockierend: Elemente hinter dem Eckband bleiben weiterhin anklickbar.
RTL-Unterstützung: Passt sich an Layouts von rechts nach links an.

HTML

RTL

Verwendung

Die Komponente wird über das corner_ribbon Tag eingebunden.

{% load insight_tags %} {# Basic usage with default top-right position #} {% corner_ribbon text="New Feature" %} {# Different positions #} {% corner_ribbon text="Beta" position="top-left" %} {% corner_ribbon text="Sale" position="bottom-right" %} {% corner_ribbon text="Limited" position="bottom-left" %} {# Different colors #} {% corner_ribbon text="Success" color="success" %} {% corner_ribbon text="Warning" color="warning" %} {% corner_ribbon text="Error" color="danger" %} {% corner_ribbon text="Info" color="info" %} {# With custom ID for JavaScript #} {% corner_ribbon text="Click Me" tag_id="promo-ribbon" position="top-right" %} {# Using config dictionary from view context #} {% corner_ribbon config=ribbon_config %}

Parameter

config (CornerRibbonConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Der im Band angezeigte Text.	None	True
position	CornerPosition CornerPosition Corner positions for ribbons, badges, and overlays. `top-right` `top-left` `bottom-right` `bottom-left` Typen Dokumentation →	Eckposition: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.	top-right	False
color	ColorType ColorType Base color palette for semantic coloring of components. `primary` `secondary` `neutral` `info` `success` `warning` `danger` Typen Dokumentation →	Farbvariante für das Band.	primary	False
foreground_color	ColorType \| str	Optional semantic text color. Empty uses white, or body text for neutral.		False
request_url	str	Optional URL that turns the ribbon into a link.	""	False
aria_label	str	Optional accessible label for the linked ribbon.	""	False

CornerRibbonConfig( text="Beta", position="top-right", color="warning", foreground_color="primary", request_url="/beta", )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)

Die Komponente verfügt über role='status' und aria-label='Status der Website' als Kontextangaben.
Der Text in dem Band kann von Screenreadern gelesen werden.
Die Komponente verwendet pointer-events-none, um Interaktionsstörungen zu verhindern.