Example 1

In this example QTabs module width is fixed while height automatically expands to fit contents height. Parameters in module configuration are set to the following values.

• Content Width: 370
• Content Height: 0 (or empty = auto-height)
• Scrolling effect: Auto
• Duration: 1000 (i.e. 1 second)
• Style: Green1

Example 2

A different layout with rounded tabs.  Unlike previous example, both width and height are fixed. In this case if content doesn't fit module height, the exceeding part will be truncated. Click Custom 1 tab and you will clearly notice that the image is only partially visible.

This example also demonstrates how to include a standard article in QTabs. First we use PlaceHere module to show the article in a module then set the module to be displayed in QTabs as usual.

Module parameters

• Content Width: 350
• Content Height: 160
• Scrolling effect: None
• Style: Rounded1

Example 3

The same set of modules used in Example 2, but this time we set a style with left aligned tabs and autoplay on.

Module parameters

• Content Width: 350
• Content Height: 225
• Tabs Height: 225
• Scrolling Effect: Right-left
• Duration: 1000
• Autoplay: Yes
• Delay: 5000
• Transition / Easing : Quintic / EaseOut
• Style: Left Blue1

Important: when you set a style with left aligned tabs as in this example it's important to set Content Height and Tabs Height to the same value.

Work in progress. More examples coming soon ...

< Prev		Next >