Search

Adding tabs to kopage

Tuesday, April 26, 2022

Kopage is built on bootstrap, and bootstrap includes tabs.If you want to add tabs to your page, create a new content block, then edit the HTML of that block and insert of the following code.

<div class="container">
	            
	<ul class="nav nav-tabs" id="myTab" role="tablist">
		  
		<li class="nav-item mr-1" role="presentation">
			    
			<button class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
				Home
			</button>
			  
		</li>
		  
		<li class="nav-item mr-1" role="presentation">
			    
			<button class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
				Profile
			</button>
			  
		</li>
		  
		<li class="nav-item mr-1" role="presentation">
			    
			<button class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
				Contact
			</button>
			  
		</li>
	</ul>
	<div class="tab-content" id="myTabContent">
		  
		<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
			        
			<div class="keditable">
				1...
			</div>
			        
		</div>
		  
		<div class="tab-pane show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
			        
			<div class="keditable">
				2...
			</div>
			        
		</div>
		  
		<div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">
			            
			<div class="keditable">
				3...
			</div>
			        
		</div>
	</div>
	            
</div>
1...
2...
3...

No comments yet