lux‐image v14

LUX-Image

• LUX-Image
  • Overview / API
    • Allgemein
    • @Input
  • Beispiele
    • 1. Pixel-Größen
    • 2. Prozent-Größen
    • 3. Raw Source

Overview / API

Allgemein

Name	Beschreibung
import	LuxIconModule
selector	lux-image

@Input

Name	Typ	Beschreibung
luxImageSrc	string	Pfad zur Bild-Datei, wenn es eine lokale Datei ist, muss das Bild unter dem Ordner /assets liegen. Beispiel: luxImageSrc="/assets/svgs/beispiel.svg"
luxImageWidth	string	Bestimmt die Breite des Bildes, hier können alle (CSS) bekannten Größen eingegeben werden. Beispiel: luxImageWidth="100%", luxImageWidth="10em", luxImageWidth="100px"
luxImageHeight	boolean	Bestimmt die Höhe des Bildes, hier können alle (CSS) bekannten Größen eingegeben werden. Beispiel: luxImageHeight="100%", luxImageHeight="10em", luxImageHeight="100px"
luxRawSrc	boolean	Deaktiviert wenn "true" jegliche Bearbeitung der luxImageSrc durch diese Component. Dadurch sind relativ liegende Image-Links erreichbar (z.B. /fb/test.png).
luxAlt	string	Eine Bildbeschreibung.

Beispiele

1. Pixel-Größen

Html

<div fxLayout="row" fxLayoutWrap>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="10px"
    luxImageHeight="20px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="40px"
    luxImageHeight="40px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="80px"
    luxImageHeight="80px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="100px"
    luxImageHeight="150px"
    fxFlex="0 0 auto"
  ></lux-image>
  <lux-image
    luxImageSrc="assets/svg/android.svg"
    luxImageWidth="200px"
    luxImageHeight="200px"
    fxFlex="0 0 auto"
  ></lux-image>
</div>

2. Prozent-Größen

Html

<lux-image
  luxImageSrc="assets/svg/svg2009.svg"
  luxImageWidth="100%"
  luxImageHeight="100%"
></lux-image>

3. Raw Source

Html

<lux-image [luxRawSrc]="true" luxImageSrc="/fb/myImage.png"></lux-image>