PuppetVendors
Search…
Powered By GitBook
Custom Page - Tabs
This article demonstrates how you can add multiple tab content on the custom page
The custom tab page helps you segment different messages that you wish to communicate with your vendors
To enable it, visit Settings -> Custom Page, copy and paste the following into the development tab as shown in the video below the code snippet.
1
<style>
2
ul#switcher li.uk-active{
3
background: #f5f5f5;
4
border-right: 3px solid;
5
}
6
</style>
7
<div class="uk-grid">
8
<div class="[email protected]">
9
<ul id="switcher" class="uk-nav uk-nav-default">
10
<li><a href="#">Tab 1 - Title</a></li>
11
<li><a href="#">Tab 2 - Title</a></li>
12
<li><a href="#">Tab 3 - Title</a></li>
13
</ul>
14
</div>
15
<div class="[email protected]">
16
<ul id="component-nav" class="uk-switcher">
17
<li>Tab 1 - Content</li>
18
<li>Tab 2 - Content</li>
19
<li>Tab 3 - Content</li>
20
</ul>
21
</div>
22
</div>
23
<script>
24
UIkit.switcher('#switcher', {connect: '#component-nav', animation: 'uk-animation-fade'});
25
</script>
Copied!
Last modified 30d ago
Copy link