Utilize o componente Tabs para organizar e apresentar conteúdo segmentado de forma clara e acessível dentro de uma mesma área da interface. Este componente é ideal para separar informações ou funcionalidades que são relacionadas, mas distintas o suficiente para requererem uma divisão clara.
Permite aos utilizadores alternar rapidamente entre diferentes vistas ou seções de conteúdo sem a necessidade de navegar para uma nova página.
Ajuda a manter a interface limpa e organizada, agrupando conteúdos relacionados sob abas claramente marcadas.
Facilita a localização e o acesso a diferentes tipos de informações, tornando a experiência do utilizador mais intuitiva e satisfatória.
Incorpore Tabs sempre que precisar de uma maneira eficiente para organizar e apresentar variadas seções de conteúdo em um espaço limitado, melhorando a clareza e a navegação na sua interface.
<div class="gra-tabs">
<a href="#" class="gra-tab">Lorem ipsum</a>
<a href="#" class="gra-tab">Lorem ipsum</a>
<a href="#" class="gra-tab active">Lorem ipsum</a>
<a href="#" class="gra-tab disabled">Lorem ipsum</a>
</div>
<div class="gra-tabs">
<a href="#" class="gra-tab iconText">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText active">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText disabled">
<i class="icon-files"></i>Lorem ipsum
</a>
</div>
<div class="gra-tabs">
<a href="#" class="gra-tab textNotif">
Lorem ipsum<span class="gra-badge danger">1</span>
</a>
<a href="#" class="gra-tab textNotif">
Lorem ipsum<span class="gra-badge danger">10</span>
</a>
<a href="#" class="gra-tab textNotif active">
Lorem ipsum<span class="gra-badge danger">100</span>
</a>
<a href="#" class="gra-tab textNotif disabled">
Lorem ipsum<span class="gra-badge danger">1000</span>
</a>
</div>
<div class="gra-tabs">
<a href="#" class="gra-tab iconText textNotif">
<i class="icon-files"></i>Lorem ipsum<span class="gra-badge danger">1</span>
</a>
<a href="#" class="gra-tab iconText textNotif">
<i class="icon-files"></i>Lorem ipsum<span class="gra-badge danger">10</span>
</a>
<a href="#" class="gra-tab iconText textNotif active">
<i class="icon-files"></i>Lorem ipsum<span class="gra-badge danger">100</span>
</a>
<a href="#" class="gra-tab iconText textNotif disabled">
<i class="icon-files"></i>Lorem ipsum<span class="gra-badge danger">1000</span>
</a>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
<div class="gra-tab-container" id="gra-tabs1">
<div class="gra-tabs">
<a href="#" class="gra-tab iconText" data-gra-tab="tab1">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText" data-gra-tab="tab2">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText active" data-gra-tab="tab3">
<i class="icon-files"></i>Lorem ipsum
</a>
<a href="#" class="gra-tab iconText disabled" data-gra-tab="tab4">
<i class="icon-files"></i>Lorem ipsum
</a>
</div>
<!-- GRA Tab content -->
<div id="gra-tabs1-tab1" class="tab-content">
<h3>Lorem ipsum Tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="gra-tabs1-tab2" class="tab-content">
<h3>Lorem ipsum Tab 2</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="gra-tabs1-tab3" class="tab-content">
<h3>Lorem ipsum Tab 3</h3>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="gra-tabs1-tab4" class="tab-content">
<h3>Lorem ipsum Tab 4</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>