Add indicator in Materialize CSS tabs

Asked

Viewed 218 times

0

Good morning,

I am with the following nescessidade, I have a project where they existed many tabs made with materialize css, but on small screen devices the tabs are hidden to the right of the screen, it is necessary to delirize Finger on the compo of the tabs to be able to visualize the remaining tabs. I would like some help to put an indication that there are hidden tabs, as in the image below:

inserir a descrição da imagem aqui

<head>
    <!--Import Google Icon Font-->
    <link href="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>
    <script src="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

1 answer

1

If you want you can do so, put a button with icons leaves it not visible and when the person clicks on the area of tab the button appears for two seconds and then disappears. Then 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>
<script src="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>

Browser other questions tagged css materialize tabs

You are not signed in. Login or sign up in order to post.