Flat Theme extension is added in version 6 of Zozo Tabs which contains 20 awesome flat themes and there are many different variations of flat themes. There are 3 styles: contained, clean and pills. Additionally we can enable borders, rounded corners and spacing. Flat Theme extension is not include in the default CSS of Zozo Tabs. So in order to use the new flat themes in we need include the flat theme extension after zozo.tabs.min.css file as showing below.
|
1 2 |
<link href="/css/zozo.tabs.min.css" rel="stylesheet"> <link href="/css/zozo.tabs.flat.min.css" rel="stylesheet"> |
After we have included the flat themes in our page, we are ready set the new flat theme in the options by using the html5 data attribute way or using jQuery. Below is an example tabs with new flat-peter-river theme and some other options are enabled.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div data-role='z-tabs' data-options='{"theme": "flat-peter-river", "style": "clean", "spaced": true,"rounded": false, "bordered": false}'> <ul> <li><a>Design</a></li> <li><a>Specs</a></li> <li><a>Price</a></li> <li><a>Release Date</a></li> </ul> <div> <div>Design</div> <div>Specs</div> <div>Price</div> <div>Release Date</div> </div> </div> |
The live example can be also view: Flat Clean Tabs
20 Awesome Flat Themes:
- flat-turquoise
- flat-emerald
- flat-peter-river
- flat-amethyst
- flat-wet-asphalt
- flat-green-sea
- flat-nephritis
- flat-belize-hole
- flat-wisteria
- flat-midnight-blue
- flat-sun-flower
- flat-carrot
- flat-alizarin
- flat-graphite
- flat-concrete
- flat-orange
- flat-pumpkin
- flat-pomegranate
- flat-silver
- flat-asbestos
That is it, Zozo Tabs docs are not yet updated with latest changes in version 6. For more questions regarding support, contact us via support email which can be found on the contact us page.