Element: Scrolling Panel

The scrolling panel element is a teaser element in which the created teasers can be scrolled horizontally or vertically.

The teaser design / stucture is organized in a Item-Container that you can customize with various contentDock® elements in the contentDock® Wireframer App. All elements used within the Item-Container inherit its styles. If you e.g. drop a headline in the container, then it inherits all styles from the element "Headline / Label". This principle applies to all elements that you add in the Item-Container.

Please note that not all contentDock® elements can be used in the Item-Container. If you want to add an element in the Item-Container, then you will be highlighted by a green color if it is possible.

Sample App

You can test this element with sample styles directly in the public area of the contentDock® Viewer App. You can also load these sample styles from the Template Library into your user account and import them into your app project.

Styles

  • Background
    Color
    Contentdock color help
    Defines the color of the element background. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Image
    Contentdock background image help
    Defines the background image for the element. The image is scaled in the element.
  • Border
    Height
    Contentdock scrolling panel border height help
    Defines the thickness of the border in pixels surrounding the element. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Radius
    Contentdock scrolling panel border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Color
    Contentdock color help
    Defines the color of the element border. Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Position
    Contentdock scrolling panel border position help
    Specify the position of the border. The border always encloses the element, but you can choose in which direction the border will be drawn.

    Possible values are:

    Inside: The border is drawn inside.

    Outside: The border is drawn outside.

    Preset system value

    This value is used if no style is defined for this element.

    inner

  • Element
    Background color (in order of each even element)
    Contentdock color help
    Defines the background color for each element within the scrolling panel, which is on position 2, 4, 6, 8, .....

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Background image (in order of each even element)
    Contentdock background image help
    Defines the background image for each element within the scrolling panel, which is on position 2, 4, 6, 8, .....
    Background color (in order of each odd element):
    Contentdock color help
    Defines the background color for each element within the scrolling panel, which is on position 1, 3, 5, 7, .....

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Background image (in order of each odd element):
    Contentdock background image help
    Defines the background image for each element within the scrolling panel, which is on position 1, 3, 5, 7, .....
    Border height
    Contentdock scrolling panel item border height help
    Defines the thickness of the border in pixels, which encloses each element within the scrolling panel.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Border radius
    Contentdock border radius help
    Defines the radius of the border in pixels used in the element corners. The value is set individually in an input field.

    Please note that only integers are entered. A "px" need not be captured.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Border color
    Contentdock color help
    Defines the color of each element border of the Scrolling Panel . Possible values are hexadecimal and of RGBA color values.

    The hexadecimal color system uses three sequently hexadecimal numbers, each representing one color of the RGB color space. Example: #ffffff for the color white.

    The RGBA color system has been extended by the RGB system with an alpha value for transparencies. Example: rgba (255,255,255,0.5) for the color white with an alpha value of 0.5.

    Preset system value

    This value is used if no style is defined for this element.

    rgba(255,255,255,0)

    Scroll direction
    Contentdock scrolling panel swip direction help
    This defines the scroll direction inside of the scrolling panel.

    Possible values are:

    Horizontal: The scroll direction is horizontal.

    Vertical: The scroll direction is vertical.

    Preset system value

    This value is used if no style is defined for this element.

    horizontal

    Item distance right
    Contentdock scrolling panel item distance right help
    Only if the scroll direction is "horizontal.

    Defines the distance between each element of the Scrolling Panel on the right edge.

    Preset system value

    This value is used if no style is defined for this element.

    0

    Item distance bottom
    Contentdock scrolling panel item distance bottom help
    Only if the scroll direction is "vertical.

    Defines the distance between each element of the Scrolling Panel of the bottom edge.
  • Help
    User information image for usage of the element
    Contentdock help image help
    If the image is displayed in the center, it shows the user, how the Scrolling Panel is used.

    The image is displayed until the user touches the element.

    We recommend to create an image with a transparent background.

    Preset system value

    This value is used if no style is defined for this element.

    Frdoczqn

Example