Logo Hilfsfunktionen

The logo component renders a brand mark from a consistent API. It supports image assets, SVG assets, and Insight UI icons.

WCAG AA

Funktionen

  • Mehrere Quellen: Bilddateien, SVG-Dateien oder Icon-Namen.

  • Variante für den Dunkelmodus: Optionales separates Bild für das dunkle Design.

  • Django static files: Paths resolved through static file system.

  • Konfigurierbare Größe: Attribute für Höhe und Breite.

HTML

Verwendung

Die Komponente wird über das logo Tag eingebunden.

{% load insight_tags %} {# SVG static asset #} {% logo config=logo_svg %} {# Bitmap image #} {% logo url="img/company-logo.png" alt="Company" height="3rem" %} {# Icon logo using the Insight UI icon set #} {% logo icon_name="sparkles" icon_size="xl" alt="Product mark" %} {# Theme-aware SVG asset #} {% logo url="svg/logo-light.svg" url_dark="svg/logo-dark.svg" alt="Company" %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
url str

Statische, absolute, root-relative oder Daten-URLs für Bild- oder SVG-Logos.

 "" False
url_dark str

Optionale URL für Bild- und SVG-Logos im dunklen Design.

 "" False
alt str

Barrierefreier Text. Leere Werte lassen Bild- bzw. SVG-Logos als dekorative Elemente erscheinen.

 "" False
icon

Die Icon-Konfig, welche verwendet wird, wenn der Typ „icon“ ist.

 None False
icon_name str

Icon-Name (Alternative zur Icon-Konfig).

 "" False
icon_size str

Icon-Größe (Alternative zur Icon-Konfig).

 "" False
height str

CSS-Höhe für Bild- und SVG-Logos.

 "2rem" False
width str

Optionale CSS-Breite für Bild- und SVG-Logos.

 "" False
LogoConfig( url="img/logo.svg", url_dark="img/logo-dark.svg", alt="Company Logo", height="2rem", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Bilder und SVG-Logos verwenden den angegebenen alt-Text. Leere alt-Werte lassen sie als reines Dekor erscheinen.

  • Icon-Logos erhalten die Eigenschaft role='img' und eine barrierefreie Beschriftung, wenn ein alt-Attribut angegeben ist.

Verwandte Themen