Is it possible to implement vertical tabs in Kendo UI?
I want the result to be similar to this screenshot:
Try vertical tab in UI bootstrap
<tabset vertical="true" type="navType">
<tab heading="Vertical 1">Vertical content 1</tab>
<tab heading="Vertical 2">Vertical content 2</tab>
</tabset>
Go through this page for reference http://angular-ui.github.io/bootstrap/
Just add
class "tabstrip-vertical"
CSS
.k-widget.k-tabstrip.tabstrip-vertical {
/*Width of the tabs*/
padding-left:12em;
border-style:none;
}
.k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items {
left:0px;
position:absolute;
border-style:none;
}
.k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item {
display:block;
border-radius:4px 0 0 4px;
border-width:1px 0 1px 1px;
/*Width of the tabs*/
width:12em;
border-style:none;
}
.k-widget.k-tabstrip.tabstrip-vertical > ul.k-tabstrip-items > li.k-item.k-state-active {
border-right-color:#fff;
border-right-width:1px;
border-style:none;
}
Vertically-oriented Tabstrips have been added to the Q1 2015 Kendo UI release.
You can find more details here: http://demos.telerik.com/kendo-ui/tabstrip/tab-position
No, Kendo UI doesn't include a vertical tabstrip widget for the time being.
!!UPDATE!!
Kendo UI now supports tab orientation - vertical and bottom tabs. Here is an a demo.
Try jQueryUI
It has vertical tab component.
http://jqueryui.com/tabs/#vertical
This link has the demo as well.
As nklein mentioned it's a new feature. Any way if you can't get the new version you can always use the menu bar, it has orientation support.
Using bootstrap:
@{
ViewBag.Title = "WIZARD";
}
<div class="page-header">
<h2>
WIZARD
</h2>
</div>
<ul class="nav nav-pills nav-stacked col-md-2" id="pills-first">
<li class="active"><a disabled="disabled" href="#tab_a" data-toggle="pill">Pill A</a></li>
<li><a disabled="disabled" href="#tab_b" data-toggle="pill">Pill B</a></li>
<li><a disabled="disabled" href="#tab_c" data-toggle="pill">Pill C</a></li>
<li><a disabled="disabled" href="#tab_d" data-toggle="pill">Finish</a></li>
</ul>
<div class="tab-content col-md-10">
<div class="tab-pane active" id="tab_a">
<h4>Pane A</h4>
<p>
This is an example of page 1
</p>
</div>
<div class="tab-pane" id="tab_b">
<h4>Pane B</h4>
<p>
This is an example of page 2
</p>
</div>
<div class="tab-pane" id="tab_c">
<h4>Pane C</h4>
<p>
This is an example of page 3
</p>
</div>
<div class="tab-pane" id="tab_d">
<h4>Finish</h4>
<p>
This is an example of page 4 (Done)
</p>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<button type="button" style="width: 90px" onclick="previousClick()" class="btn btn-primary btn-sm">< Previous</button>
</div>
<div class="col-sm-1">
<button type="button" style="width: 90px" onclick="nextClick()" class="btn btn-primary btn-sm">Next ></button>
</div>
<div class="col-sm-1">
<button id="finishButton" style="width: 90px" type="button" onclick="finishClick()" class="btn btn-primary btn-sm">Finish</button>
</div>
</div>
<script>
var startIndex = 0;
$(document).ready(function () {
$($('#pills-first a')[startIndex]).tab('show'); // Display Tab A
//$($('#pills-first a')[1]).tab('show'); // Display Tab B
//$($('#pills-first a')[2]).tab('show'); // Display Tab C
$('#finishButton')[0].style.display = "none";
});
function previousClick(e) {
startIndex = startIndex - 1;
if (startIndex < 0)
startIndex = startIndex + 1;
$($('#pills-first a')[startIndex]).tab('show');
}
function nextClick(e) {
if (startIndex < $('#pills-first a').length - 1) {
startIndex = startIndex + 1;
}
if (startIndex == $('#pills-first a').length-1) {
$('#finishButton')[0].style.display = "block";
}
$($('#pills-first a')[startIndex]).tab('show');
}
function finishClick(e) {
alert("COMPLETE");
}
</script>