Bom dia,
Estou com a seguinte nescessidade, tenho um projeto onde existiram muitas abas feitas com materialize css, porem em dispositivos de tela pequenas as abas ficam ocultas a direita da tela, sendo necessario delizar o dedo sobres o compo das abas para poder visualizar as abas restantes. Gostaria de uma ajuda para colocar um indicativo de que haja abas escondidas, como na img a baixo:
<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>