Side sheet

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

CONTAINER · stable

Side sheet, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalSide">Abrir side sheet</button>
                  </div><div class="sc-modal" id="demoModalSide">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel sc-modal-panel--side" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Side sheet</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <div class="sc-field">
                          <label class="sc-label" for="sideTitle">Título</label>
                          <input id="sideTitle" class="sc-input" placeholder="Ex.: Meu item">
                        </div>
                        <div class="sc-field">
                          <label class="sc-label" for="sideDesc">Descrição</label>
                          <textarea id="sideDesc" class="sc-textarea" placeholder="Detalhes⬦"></textarea>
                        </div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Cancelar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Salvar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-panel--sidesc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-fieldsc-labelsc-inputsc-textareasc-modal-footersc-btn-primary

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

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