Mit der Image Komponente können Bilder angeordnet und die ausgespielten Größen in den Properties frei eingestellt werden.
In diesem Artikel lesen Sie folgende Inhalte:
Tipp! Hier sehen Sie mehr über die Komponente.
1. Image Properties
|
Properties |
Beschreibung |
|---|---|
|
ID |
Bezeichnung / Benamung der Headline |
|
Color scheme |
Initiale Farbschemen:
|
|
Konfiguriert in Color Schemes |
|
|
CSS class |
Elemente einer Gruppe/Klasse zuordnen, für die dann bestimmte Formatierungen gelten Option 1: in Properties bestehende Bootstrap-Klassen einfügen Option 2: über Hauptmenü in den Page Templates (für “alles verfügbar”) Option 3: Page definitions (nur für diese Seite) |
|
Tab index |
Bei Navigation in der Page mit Tastatur (Tab), lässt sich mit dem Tab index die Reihenfolge festlegen, wo der Cursor als nächstes aktiv wird. |
|
Access |
Access rights der Komponente:
|
|
Path |
Ein Bild muss zuvor in ihrem Repository hochgeladen (importiert) werden. Erstellen Sie in den Design objects einen Ordner (z.B. Bilder), markieren diesen und klicken sie auf Import (Rechtsklick → Import) um Bilder hochzuladen Der Pfad zum Bild und die Bilddatei kann mit “Select a image” ausgewählt werden. Noch einfacher geht es per Drag and Drop. |
|
Alternative Text |
Dieser Text ist im HTML-Code enthalten, wird aber nur angezeigt wenn das Bild nicht verfügbar ist.
|
|
Size |
Durch Ändern der Breite der platzierten Image Komponente wird das Bild kleiner skaliert dargestellt. Damit z.B. für ein kleines Logo keine hochauflösende Grafik geladen werden muss, kann man durch Angaben bei width und height aus dem Orgnial ein kleineres Bild generieren. Das wirkt sich positiv auf die Ladezeit aus |
|
Width |
Breite in Pixel, in der das Bild erstellt werden soll. (Nur wenn Change size aktiv ist) |
|
Height |
Höhe in Pixel, in der das Bild erstellt werden soll. (Nur wenn Change size aktiv ist) |
|
Align |
Die Ausrichtung eines Bildes innerhalb der definierten Breite der Komponente Optionen:
|
2. Image Funktionalitäten
Events
|
Event |
Beschreibung |
|---|---|
|
clicked |
This event fires when the image is clicked by the user. |
Actions
|
Kategorisierung |
Action |
Beschreibung |
|---|---|---|
|
State |
enable() |
Enable the image. |
|
disable() |
Disable the image. |
|
|
setEnabled(enabled) |
Enable/disable the image. |
|
|
show() |
Shows the image. |
|
|
hide() |
Hides the image. |
|
|
setVisible(visible) |
Show/hide the image. |