Element: Thumbnail Gallery

Die Thumbnail Gallery ist ein Element, in der für jedes Inhalts-Objekt ein Bild / Video, ein Text und ein Link gesetzt wird. Tippt der Nutzer auf ein Thumbnail, so wird dieses Inhalts-Objekt im Element angezeigt. Die Thumbnail Gallery ist für den Top-Bereich einer Seite gedacht. Sie können das Element aber auch an jeder gewünschten Position in ihrer Vorlage verwenden.

Struktur

In der Thumbnail Gallery sind drei Elemente fest integriert, die in der Position und Größe individuell angepasst werden können:

  1. Sub-Element "Text", verwendet alle Styles vom Element "Simple Text
  2. Sub-Element "Link", verwendet alle Styles vom Element "Navigation Button"
  3. Sub-Element "Thumbnail Panel" (Styles siehe weiter unten)

Inhalte & Verhalten

Die Thumbnail Gallery enthält keine feste Anzahl an Inhalts-Objekten. Jedes Inhalts-Objekt enthält:

  1. Ein Bild / Video, welches in der gesamten Fläche der Thumbnail Gallery angezeigt wird. Videos werden automatisch gestartet, wenn das Inhalts-Objekt aktiviert ist.
  2. Ein Miniaturbild, welches im Thumbnail Panel dargestellt wird.
  3. Einen Text, der im Sub-Element "Text" angezeigt wird.
  4. Einen Link, der im Sub-Element "Link" angezeigt wird.

Beispiel App

Sie können dieses Element mit Beispiel-Styles direkt im öffentlichen Bereich der contentDock® Viewer App testen. Zusätzlich können Sie diese Beispiel-Styles auch aus der Vorlagen-Bibliothek in Ihren Benutzer-Account laden und in Ihr App-Projekt importieren.

Styles

  • Hintergrund
    Farbe
    Contentdock color help
    Definiert die Farbe für den Hintergrund des Elements. Die Farbe wird in der kompletten Größe des Elements verwendet. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Bild
    Contentdock background image help
    Definiert das Hintergrundbild für das Element. Das Bild wird skaliert im Element dargestellt.
  • Rahmen
    Höhe
    Contentdock thumbnail gallery border height help
    Definiert die Stärke des Rahmens in Pixel, der das Element umschließt. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Radius
    Contentdock thumbnail gallery border radius help
    Definiert den Radius des Rahmens in Pixel, der in den Element-Ecken verwendet wird. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Definiert die Farbe für den Rahmen des Elements. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Position
    Contentdock thumbnail gallery border position help
    Hiermit geben Sie die Position des Rahmens an. Der Rahmen umschließt immer das Element, allerdings können Sie wählen in welche Richtung der Rahmen gezeichnet wird.

    Mögliche Werte sind:

    Innen: Der Rahmen wird nach innen gezeichnet.

    Außen: Der Rahmen wird nach außen gezeichnet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    inner

Thumbnail panel

  • Hintergrund
    Farbe
    Contentdock color help
    Definiert die Farbe für den Hintergrund des Thumbnail Panel Elements. Die Farbe wird in der kompletten Größe des Elements verwendet. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Bild
    Contentdock background image help
    Definiert das Hintergrundbild für das Thumbnail Panel Element. Das Bild wird skaliert im Element dargestellt.
  • Rahmen
    Höhe
    Contentdock thumbnail panel border height help
    Definiert die Stärke des Rahmens in Pixel, der das Element umschließt. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Radius
    Contentdock thumbnail panel border radius help
    Definiert den Radius des Rahmens in Pixel, der in den Element-Ecken verwendet wird. Der Wert wird individuell in einem Eingabefeld gesetzt.

    Bitte beachten Sie, dass nur ganze Zahlen eingegeben werden. Ein "px" muss nicht erfasst werden.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Farbe
    Contentdock color help
    Definiert die Farbe für den Rahmen des Thumbnail Panel Elements. Mögliche Werte sind hexadezimale sowie RGBA Farbwerte.

    Beim hexadezimalen Farbsystem werden drei aufeinanderfolgende Hexadezimalzahlen verwendet, die jeweils für eine Farbe des RGB-Farbraums stehen. Beispiel: #ffffff für die Farbe Weiß.

    Das RGBA Farbsystem ist vom RGB System um einen Alphawert für Transparenzen erweitert. Beispiel: rgba(255,255,255,0.5) für die Farbe Weiß mit einem Alphawert 0.5.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    rgba(255,255,255,0)

    Position
    Contentdock thumbnail panel border position help
    Hiermit geben Sie die Position des Rahmens an. Der Rahmen umschließt immer das Element, allerdings können Sie wählen in welche Richtung der Rahmen gezeichnet wird.

    Mögliche Werte sind:

    Innen: Der Rahmen wird nach innen gezeichnet.

    Außen: Der Rahmen wird nach außen gezeichnet.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    inner

  • Innerer Abstand
    Nach oben
    Contentdock thumbnail panel padding top help
    Definiert den Abstand zwischen dem oberen Rand des Elements "Thumbnail Panel" und dem Miniaturbild.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Nach unten
    Contentdock thumbnail panel padding bottom help
    Definiert den Abstand zwischen dem unteren Rand des Elements "Thumbnail Panel" und dem Miniaturbild.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Nach links
    Contentdock thumbnail panel padding left help
    Definiert den Abstand zwischen dem linken Rand des Elements "Thumbnail Panel" und dem Miniaturbild.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Nach rechts
    Contentdock thumbnail panel padding right help
    Definiert den Abstand zwischen dem rechten Rand des Elements "Thumbnail Panel" und dem Miniaturbild.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

  • Element
    Scroll-Richtung
    Contentdock thumbnail panel swip direction help
    Hiermit wird die Scroll-Richtung innerhalb des Thumbnail Panels definiert.

    Mögliche Werte sind:

    Horizontal: Die Scroll-Richtung ist horizontal.

    Vertikal: Die Scroll-Richtung ist vertikal.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    horizontal

    Elementabstand rechts
    Contentdock thumbnail panel thumb padding right help
    Nur wenn die Scroll-Richtung" horizontal ist.

    Definiert den Abstand rechts zwischen den Miniaturbildern.

    Voreingestellter Systemwert

    Dieser Wert wird verwendet, wenn kein Style für dieses Element definiert ist.

    0

    Elementabstand unten
    Contentdock thumbnail panel thumb padding bottom help
    Nur wenn die Scroll-Richtung" vertikal ist.

    Definiert den Abstand unten zwischen den Miniaturbildern.