CONTAINER · stable
#Header + menu (overflow)
Header + menu (overflow), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-tabs sc-tabs--underline sc-tabs--indicator">
<div class="sc-tabs-head">
<div class="sc-tablist">
<button class="sc-tab" type="button" aria-selected="true">Geral</button>
<button class="sc-tab" type="button" aria-selected="false">Cobrança</button>
<button class="sc-tab" type="button" aria-selected="false">Segurança</button>
</div>
<div class="sc-tabs-actions">
<div class="sc-menu">
<button class="sc-btn sc-btn-glass sc-btn-sm" type="button" data-menu-trigger="">Mais</button>
<div class="sc-menu-popover">
<button class="sc-menu-item" type="button">Auditoria</button>
<button class="sc-menu-item" type="button">Webhooks</button>
<div class="sc-menu-sep"></div>
<button class="sc-menu-item" type="button">Suporte</button>
</div>
</div>
</div>
</div>
<div class="sc-tabpanel">Tabs com menu no header.</div>
<div class="sc-tabpanel" hidden="">Cobrança.</div>
<div class="sc-tabpanel" hidden="">Segurança.</div>
</div>Classes, JavaScript e API
Inicialize tabs após o DOM. Os atributos data-* do exemplo são a API declarativa.
- Plugin
- tabs
- Dependências
- smart-ui.js
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.