Element: Scrolling Panel

Das Scrolling Panel Element ist ein Teaser Element, in dem die angelegten Teaser horizontal oder vertikal gescrollt werden können.

In der contentDock® Wireframer App wird ihnen für die Teaser-Struktur / Design ein Item-Container zur Verfügung gestellt, der mit diversen contentDock® Elementen selbst gestaltet werden kann. Alle verwendeten Elemente innerhalb des Item-Containers erben jeweils dessen Styles. Wenn Sie z.B. eine Headline in den Container legen, dann erbt diese alle Styles vom Element "Headline / Label". Dieses Prinzip gilt für alle Elemente, die Sie in den Item-Container positionieren.

Bitte beachten Sie, dass nicht alle contentDock® Elemente in den Item-Container verwendet werden können. Wenn Sie in der contentDock® Wireframer App ein Element hinzufügen möchten, dann wird ihnen mit einer grünen Fläche über den Item-Container signalisiert, ob dies möglich ist.

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 scrolling 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 scrolling 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 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 scrolling 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

  • Element
    Hintergrundfarbe (in der Reihenfolge jedes gerade Element)
    Contentdock color help
    Definiert die Hintergrundfarbe für jedes Element innerhalb des Scrolling Panels, welches in der Reihenfolge an der Position 2, 4, 6, 8, ... steht.

    Voreingestellter Systemwert

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

    rgba(255,255,255,0)

    Hintergrundbild (in der Reihenfolge jedes gerade Element)
    Contentdock background image help
    Definiert das Hintergrundbild für jedes Element innerhalb des Scrolling Panels, welches in der Reihenfolge an der Position 2, 4, 6, 8, ... steht.
    Hintergrundfarbe (in der Reihenfolge jedes ungerade Element)
    Contentdock color help
    Definiert die Hintergrundfarbe für jedes Element innerhalb des Scrolling Panels, welches in der Reihenfolge an der Position 1, 3, 5, 7, ... steht.

    Voreingestellter Systemwert

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

    rgba(255,255,255,0)

    Hintergrundbild (in der Reihenfolge jedes ungerade Element)
    Contentdock background image help
    Definiert das Hintergrundbild für jedes Element innerhalb des Scrolling Panels, welches in der Reihenfolge an der Position 1, 3, 5, 7, ... steht.
    Rahmenhöhe
    Contentdock scrolling panel item border height help
    Definiert die Stärke des Rahmens in Pixel, der jedes Element innerhalb des Scrolling Panels umschließt.

    Voreingestellter Systemwert

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

    0

    Rahmenradius
    Contentdock 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

    Rahmenfarbe
    Contentdock color help
    Definiert die Farbe für den Rahmen jedes Elements innerhalb des Scrolling Panels. 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)

    Scroll-Richtung
    Contentdock scrolling panel swip direction help
    Hiermit wird die Scroll-Richtung innerhalb des Scrolling 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 scrolling panel item distance right help
    Nur wenn die Scroll-Richtung" horizontal ist.

    Definiert den Abstand rechts zwischen jedem Element innerhalb des Scrolling Panels.

    Voreingestellter Systemwert

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

    0

    Elementabstand unten
    Contentdock scrolling panel item distance bottom help
    Nur wenn die Scroll-Richtung" vertikal ist.

    Definiert den Abstand unten zwischen jedem Element innerhalb des Scrolling Panels.
  • Hilfe
    Benutzerinformationsbild für die Verwendung des Elements
    Contentdock help image help
    Zeigt dem Nutzer ein Bild zentriert im Element, um zu zeigen, wie es verwendet wird.

    Das Bild wird solange angezeigt, bis der Nutzer das Element berührt.

    Wir empfehlen, das Hilfe-Bild mit einer Transparenz zu erstellen.

    Voreingestellter Systemwert

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

    Frdoczqn

Beispiel