lux‐tenant‐logo v18 - IHK-GfI/lux-components GitHub Wiki

LUX-Tenant-Logo

Beispielbild LUX-Tenant-Logo

Overview / API

Diese Komponente soll wie eine Lookup Komponente benutzt werden, die eine Lookup-Url bereitstellt und je nach Bildschirmauflösung zwischen verschiedenen Varianten wechselt.

Allgemein

Name Beschreibung
import LuxTenantLogoModule
selector lux-tenant-logo

LuxTenantLogo

@Input

Name Typ Beschreibung
luxTenantKey string Bestimmt den Schlüssel, der die unterschiedlichen Logos unterscheidet.
luxTenantVariant string Bestimmt die Variante des Logos. Wird automatisch ermittelt wenn diese Property leer gelassen wird.
luxTenantLogoHeight string Bestimmt die Höhe des Bildes, hier können alle (CSS) bekannten Größen eingegeben werden. Beispiele: luxTenantLogoHeight="10%", luxTenantLogoHeight="10em", luxTenantLogoHeight="100px"

@Output

Name Typ Beschreibung
luxTenantLogoClicked EventEmitter <Event> Dieser Output-Emitter gibt das Click-Event auf dem lux-image wieder.

Konfiguration

Logos mit der App ausliefern

Siehe LUX-Components-Config.

Logos über ein CDN laden

Siehe LUX-Components-Config.

Beispiele

1. Tenant Logo in lux-app-header-ac

Wichtig:

Es kann entweder das Attribut luxBrandLogoSrc der lux-app-header-ac Komponente benutzt werden oder die lux-tenant-logo Komponente!

Um die lux-tenant-logo Komponente zu verwenden, muss das Attribut luxHideBrandLogo auf true gesetzt werden, ansonsten wird weiterhin das Attribut luxBrandLogoSrc verwendet.

Beispielbild 01

Html

<lux-app-header-ac ... [luxHideBrandLogo]="true" ...>
  <lux-tenant-logo luxTenantKey="202" luxTenantVariant="lang"></lux-tenant-logo>

  ...
</lux-app-header-ac>

2. Tenant Logo mit automatischen Varianten

Lang:

Beispielbild 01

Unten:

Beispielbild 02

Ohne:

Beispielbild 03

Html

<lux-tenant-logo luxTenantKey="100"></lux-tenant-logo>
⚠️ **GitHub.com Fallback** ⚠️