Add indicator on Materialize CSS tabs

Question

Add indicator on Materialize CSS tabs

Navigation

#1 by (1 votes)

0

Good morning,

I have the following requirement, I have a project where they existed many tabs made with materialize css, but in small screen devices the tabs are hidden to the right of the screen, being necessary to delizar the finger envelopes the tabs to view the remaining tabs. I would like some help to put an indication that there are hidden tabs, as in img below:

<head><!--ImportGoogleIconFont--><linkhref="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">


    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>    
    <div class="row">
        <div class="col s12">
            <ul class="tabs">
                <li class="tab col s3"><a href="#test1">Test grandão 1 </a></li>
                <li class="tab col s3"><a href="#test2">Test grandão 2</a></li>
                <li class="tab col s3 "><a href="#test3">Teste grandão 3</a></li>
                <li class="tab col s3"><a href="#test4">Test grandão 4</a></li>
                <li class="tab col s3"><a href="#test5">Test grandão 5</a></li>
                <li class="tab col s3"><a href="#test6">Test grandão 6</a></li>
                <li class="tab col s3 "><a href="#test7">Teste grandão 7</a></li>
                <li class="tab col s3"><a href="#test8">Test grandão 8</a></li>        
            </ul>
        </div>
        <div id="test1" class="col s12">Test 1</div>
        <div id="test2" class="col s12">Test 2</div>
        <div id="test3" class="col s12">Test 3</div>
        <div id="test4" class="col s12">Test 4</div>
        <div id="test5" class="col s12">Test 5</div>
        <div id="test6" class="col s12">Test 6</div>
        <div id="test7" class="col s12">Test 7</div>
        <div id="test8" class="col s12">Test 8</div>    
    </div>
    <!--JavaScript at end of body for optimized loading-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.tabs').tabs();
        });            
    </script>
</body>

css materialize tabs

asked by anonymous 26.08.2018 / 18:07

1 answer

Plugin with error Uncaught TypeError: Can not read property 'clone' of undefined Exporting an .xlsx with Java

score 1 · Answer 1

If you want you can do this, put a button with icons makes it not visible and when the person clicks the tab area the button appears for two seconds and then disappears. Here you use media queries to hide the button in the desktop version.

$(document).ready(function(){
   $('.tabs').tabs();
   var seta = $('.seta');                // pega a seta
   seta.hide();                          // esconde a seta
   
   $('#tab').on('click', function() {   // pega o click na tab   
      seta.show().fadeOut(2000);       // mostra o botão e esconde depois de 2 segundos
   })
});

@media only screen and (min-width: 700px) {  /*apenas para funcionar aqui no site*/
  .seta{
    visibility: hidden;
  }  
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

<div class="row">
   <div class="col s12" id="tab">
       <ul class="tabs">
           <li class="tab col s3"><a href="#test1">Test grandão 1 </a></li>
           <li class="tab col s3"><a href="#test2">Test grandão 2</a></li>
           <li class="tab col s3 "><a href="#test3">Teste grandão 3</a></li>
           <li class="tab col s3"><a href="#test4">Test grandão 4</a></li>
           <li class="tab col s3"><a href="#test5">Test grandão 5</a></li>
           <li class="tab col s3"><a href="#test6">Test grandão 6</a></li>
           <li class="tab col s3 "><a href="#test7">Teste grandão 7</a></li>
           <li class="tab col s3"><a href="#test8">Test grandão 8</a></li>        
       </ul>
   </div>
   
   <div id="test1" class="col s12">Test 1</div>
   <div id="test2" class="col s12">Test 2</div>
   <div id="test3" class="col s12">Test 3</div>
   <div id="test4" class="col s12">Test 4</div>
   <div id="test5" class="col s12">Test 5</div>
   <div id="test6" class="col s12">Test 6</div>
   <div id="test7" class="col s12">Test 7</div>
   <div id="test8" class="col s12">Test 8</div> 
   
   <span class="right seta">
       <a class="btn btn-small red">
           <i class="small material-icons">arrow_forward</i>
       </a>
   </span>
 
</div>