Morph (stack) • Single · Expandable card

Link permanente para esta variação, com prévia, código e requisitos completos.

CONTAINER · stable

Morph (stack) • Single

Morph (stack) • Single, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

HTML e exemplo

<div class="sc-disclosure" data-disclosure="single" data-morph="true">
                        <details class="sc-disclosure-item" open="">
                          <summary class="sc-disclosure-summary">
                            <i class="sc-icon sc-disclosure-icon" data-smart-icon="tool"></i>
                            <span class="sc-disclosure-title">O que é design engineering?</span>
                            <i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
                          </summary>
                          <div class="sc-disclosure-panel"><div class="sc-disclosure-content">
                            <p>Onde intuição de design encontra execução em código  para enxergar problemas de UI e construir soluções do zero.</p>
                          </div></div>
                        </details>
                        <details class="sc-disclosure-item">
                          <summary class="sc-disclosure-summary">
                            <i class="sc-icon sc-disclosure-icon" data-smart-icon="grid"></i>
                            <span class="sc-disclosure-title">O que é “craft” de UI?</span>
                            <i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
                          </summary>
                          <div class="sc-disclosure-panel"><div class="sc-disclosure-content">
                            <p>Construir bem: dominar a plataforma para não depender de ferramentas específicas.</p>
                          </div></div>
                        </details>
                        <details class="sc-disclosure-item">
                          <summary class="sc-disclosure-summary">
                            <i class="sc-icon sc-disclosure-icon" data-smart-icon="globe"></i>
                            <span class="sc-disclosure-title">Por que focar na web?</span>
                            <i class="sc-icon sc-disclosure-toggle" data-smart-icon="plus"></i>
                          </summary>
                          <div class="sc-disclosure-panel"><div class="sc-disclosure-content">
                            <p>Trabalhando com a web (e não contra ela) você desbloqueia performance, acessibilidade e durabilidade.</p>
                          </div></div>
                        </details>
                      </div>

Classes, JavaScript e API

sc-disclosuresc-disclosure-itemsc-disclosure-summarysc-iconsc-disclosure-iconsc-disclosure-titlesc-disclosure-togglesc-disclosure-panelsc-disclosure-content

Inicialize disclosures após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: disclosures
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.