2.10 #Components.Dialog Dialog
Okno modalne (formularz edycji) z backdrop, przyciskiem zamknięcia (X),
treścią formularza (body) i przyciskami akcji (submit).
Trigger: data-dialog-open="dialog-xyz". JS: src/js/modules/dialog.js.
Stany: .is-active, .is-dismissing. Scroll lock: .dialog-open na body.
Example
Markup: dialog.html
<!-- Dialog: statyczny podgląd (bez backdrop) -->
<div style="position:relative; background:#f5f5f1; padding:20px; border-radius:8px; max-width:400px;">
<div class="dialog" style="position:relative; transform:none; opacity:1; max-width:100%;">
<button class="dialog__close" aria-label="Zamknij"></button>
<div class="dialog__body">
<label class="text-input__label">Imię</label>
<div class="text-input__body">
<input class="text-input__field" value="Jan" placeholder="Wpisz imię" />
</div>
</div>
<div class="dialog__actions">
<button class="btn btn-positive">Zapisz</button>
</div>
</div>
</div>
Source:
src/scss/components/_dialog.scss, line 1