.disabled
to make a tab inaccessible.This tabs are normal tabs and following example.
<div class="row">
<div class="col s12">
<ul class="tabs z-depth-1">
<li class="tab col"><a href="#html5">HTML5</a></li>
<li class="tab col"><a href="#css3">CSS3</a></li>
<li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
<li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
<li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
</ul>
<div id="html5" class="col s12">
<h3>HTML5 Tutorial</h3>
</div>
<div id="css3" class="col s12">
<h3>CSS3 Tutorial</h3>
</div>
<div id="md_css" class="col s12">
<h3>Materialize CSS Tutorial</h3>
</div>
<div id="bootstrap_4" class="col s12">
<h3>Bootstrap 4 Tutorial</h3>
</div>
<div id="java_script" class="col s12">
<h3>JavaScript Tutorial</h3>
</div>
</div>
</div>
Add the .tabs-fixed-width
class, all tabs are automatically adjust some fixed width.
<div class="row">
<div class="col s12">
<ul class="tabs z-depth-1 tabs-fixed-width">
<li class="tab col"><a href="#html5">HTML5</a></li>
<li class="tab col"><a href="#css3">CSS3</a></li>
<li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
<li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
<li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
</ul>
<div id="html5" class="col s12">
<h3>HTML5 Tutorial</h3>
</div>
<div id="css3" class="col s12">
<h3>CSS3 Tutorial</h3>
</div>
<div id="md_css" class="col s12">
<h3>Materialize CSS Tutorial</h3>
</div>
<div id="bootstrap_4" class="col s12">
<h3>Bootstrap 4 Tutorial</h3>
</div>
<div id="java_script" class="col s12">
<h3>JavaScript Tutorial</h3>
</div>
</div>
</div>
The scrollable tabs means, are you adding any extra tabs in tab menu the display will be automatically scrolling.
<div class="row">
<div class="col s12">
<ul class="tabs z-depth-1">
<li class="tab col"><a href="#html5">HTML5</a></li>
<li class="tab col"><a href="#css3">CSS3</a></li>
<li class="tab col"><a class="active" href="#md_css">Materialize CSS</a></li>
<li class="tab col"><a href="#bootstrap_3">Bootstrap 3</a></li>
<li class="tab col"><a href="#bootstrap_4">Bootstrap 4</a></li>
<li class="tab col disabled"><a href="#java_script">JavaScript</a></li>
<li class="tab col"><a href="#jquery">jQuery</a></li>
<li class="tab col"><a href="#ajax">Ajax</a></li>
<li class="tab col"><a href="#angular_js">AngularJS</a></li>
<li class="tab col disabled"><a href="#c_language">C-Language</a></li>
<li class="tab col"><a href="#java">Java</a></li>
<li class="tab col"><a href="#php">PHP</a></li>
<li class="tab col"><a href="#python">Python</a></li>
</ul>
<div id="html5" class="col s12">
<h3>HTML5 Tutorial</h3>
</div>
<div id="css3" class="col s12">
<h3>CSS3 Tutorial</h3>
</div>
<div id="md_css" class="col s12">
<h3>Materialize CSS Tutorial</h3>
</div>
<div id="bootstrap_3" class="col s12">
<h3>Bootstrap 3 Tutorial</h3>
</div>
<div id="bootstrap_4" class="col s12">
<h3>Bootstrap 4 Tutorial</h3>
</div>
<div id="java_script" class="col s12">
<h3>JavaScript Tutorial</h3>
</div>
<div id="jquery" class="col s12">
<h3>jQuery Tutorial</h3>
</div>
<div id="ajax" class="col s12">
<h3>Ajax Tutorial</h3>
</div>
<div id="angular_js" class="col s12">
<h3>AngularJS Tutorial</h3>
</div>
<div id="c_language" class="col s12">
<h3>C-Language Tutorial</h3>
</div>
<div id="java" class="col s12">
<h3>Java Tutorial</h3>
</div>
<div id="php" class="col s12">
<h3>PHP Tutorial</h3>
</div>
<div id="python" class="col s12">
<h3>Python Tutorial</h3>
</div>
</div>
</div>
Tabs are initialized automatically, but if you add tabs dynamically you will have to initialize them like this.
$(document).ready(function(){
$('ul.tabs').tabs();
});
By setting the swipeable
option to true
, you can enable tabs where you can swipe on touch enabled devices to switch tabs. Make sure you keep the tab content divs in the same wrapping container.
Note : This is also touch compatible! Try swiping with your finger to scroll through the carousel.
<div class="row">
<div class="col s12">
<ul id="tabs_swipe" class="tabs">
<li class="tab col"><a class="active" href="#html5">HTML5</a></li>
<li class="tab col"><a href="#css3">CSS3</a></li>
<li class="tab col"><a href="#md_css">Materialize CSS</a></li>
</ul>
<div id="html5" class="col s12 deep-orange">
<h3>HTML5 Tutorial</h3>
</div>
<div id="css3" class="col s12 light-blue">
<h3>CSS3 Tutorial</h3>
</div>
<div id="md_css" class="col s12 red lighten-2">
<h3>Materialize CSS Tutorial</h3>
</div>
</div>
</div>
<!-- Start Swipable Tabs -->
<script type="text/javascript">
if ($('#tabs_swipe').length) {
$('#tabs_swipe').tabs({ 'swipeable': true });
}
</script>
<!-- End Swipable Tabs -->