Модольдер және шығатын панельдер

1) Қашан пайдалану керек

Modal (бэкдроппен диалог) - толық назар аударуды талап ететін сындарлы шешімдер мен қысқа міндеттер үшін: әрекетті растау, құқықтық келісімдер, қауіпті операциялар, 1-2 өрісті ≤ қысқаша нысандары. Аяны бұғаттайды.
Drawer/Sheet - мәтінмәндік кеңейту үшін: нысан бөлшектері, атрибуттарды өңдеу, тізімнен таңдау, қосалқы навигация. Аясы көрінеді → мәтінмәні сақталады.

• Егер әрекетке концентрация және растау қажет болса → Modal.
• Контексті сақтау және → Drawer «параллель» шолу беру керек.

2) Құрылымы мен өлшемдері

Modal

Тақырып (міндетті) → негізгі мәтін → CTA-аймақ (Primary/Secondary/Destructive).
Өлшемдері: S (480-560 px), M (640-720 px), L (≤ 840 px). Мобильді - толық экранды sheet.

Drawer / Sheet

Бағыт: оң жақ жиек (десктоп, редакциялау), төменгі (мобайл, әрекеттер), кейде сол жақ (навигация).
Ені: 360-480 (S), 480-640 (M), 640-800 (L). Мобильде: ені/биіктігі 90-100%.

Мазмұн биіктігі әрқашан шектелген, ішінде - скролл; тақырыбы/СТА тіркелген.

3) Копирайтинг және CTA

Тақырып = іс-әрекет/мағынасы: «Мөлшерлемені растау», «Төлем әдісін таңдау», «KYC талап етіледі».
Қысқа мәтін, 1-2 сөйлем. Анық емес формулалардан аулақ болыңыз.
CTA: бір Primary, жанында Secondary («Болдырмау») және қажет болған жағдайда Destructive.

Тәуекелді әрекеттер үшін 1-жолға түсіндірме қосыңыз: "Әрекет қайтарымсыз. Сіз 10 секунд ішінде (егер бар болса) кері қайтара аласыз"

4) Мінез-құлық және жай-күй

Ашу: лезде жауап беру ≤ 100 мс, содан кейін анимация 120-180 мс.
Жабу: жылдам ашу (80-140 мс), триггерге фокусты қайтарыңыз.
Busy: 'aria-busy = «true» контейнерде, қайталау бұғаттағышы бар түймешік.
Unsaved (лас пішін): жабылғанда - ескерту диалогы («Сақталмаған өзгерістер бар»).
Escape/фон бойынша басу: қауіпсіз диалогтар үшін жарамды; сындылар үшін - тек анық түймелер.

5) Қолжетімділік (A11y)

Контейнер: 'role = «dialog' және 'aria-modal =» true' (осы модулдер үшін).
Тақырып 'aria-labelledby' арқылы байланысқан; сипаттамасы - 'aria-describedby'.
Focus trap ішінде; бастапқы фокус - тақырыпқа немесе бірінші интерактивті элементке.
Жабылғаннан кейін бастапқы триггерге фокусты қайтару.
Өң бүркемесі жоқ: 'document. body {overflow: hidden;} 'немесе' inert 'қалған DOM'.
Пернетақтаны қолдау: Tab/Shift + Tab циклді; Esc жабады (егер сценарийде тыйым салынбаса).
'prefers-reduced-motion' дегенді ескеріңіз: анимацияларды өшіру/жеңілдету.

html
<div class="backdrop" data-open hidden></div>
<div class="dialog" role="dialog" aria-modal="true" aria-labelledby="d-title" aria-describedby="d-desc" hidden>
<h2 id =" d-title "> Confirm Bid </h2>
<p id =" d-desc "> Sum of 200 ₴ by factor 1. 85</p>
<div class="actions">
<button class =" btn btn--primary "> Confirm </button>
<button class =" btn btn--ghost "> Cancel </button>
</div>
</div>

6) Өнер және сәулет

Портал арқылы рендер (қосымшаның үстіңгі қабаты) → z-index проблемаларынан аз.
Бірінші ашылғанда мазмұнды жалқаулықпен монтаждаңыз, жабу анимациясынан кейін бөлшектеңіз (немесе offscreen аударыңыз).
Тек 'transform/opacity'; үлкен көлемді қымбат blur/көлеңкелерден аулақ болыңыз.
Өңдегі скроллды (scroll-lock) бұғаттаңыз, жабылғаннан кейін «секірмеу» үшін ағымдағы позицияны сақтаңыз.
drawer бағдарламасындағы үлкен тізімдер үшін виртуалдандыруды пайдаланыңыз.

7) Мобильді үлгілер

Жылдам әрекеттер/растаулар үшін Bottom sheet: (табалдырықпен) жабу үшін төмен қарай қадамдар.
Sticky-CTA төменде; жабу түймесі - солдан жоғары.
Safe-area шегіністері (notch/gesture areas).
Экрандық пернетақта CTA-ны жабуға тиіс емес; layout - мазмұнды «көтеру» немесе пернетақта үстіндегі бекітілген тақтасы.

8) Motion-дизайн

Кіру: fade + жеңіл ауысу (modal: Y бойынша, drawer: пайда болу осі бойынша). 120-180 мс.
Шығу: қысқа (80-140 мс), easing 'cubic-bezier (0. 2,0,0. 2,1)`.
Фон (backdrop): мөлдірлігі 0 → 0. 4–0. 6. Пульсациясыз және шексіз жарқылдаусыз.
'prefers-reduced-motion' үшін: жылжусыз, тек fade.

9) Жабуды басқару

Қауіпсіз операциялар кезінде ғана дереу жабу.
Қате болса, диалогта қаламыз, себебін және Retry көрсетеміз.
Өңдік орындауда - диалогты жабу және «Фонда орындаймыз»... тостын көрсету, плюс «Тарих» бөлімі.

10) iGaming типтік сценарийлері

10. 1 Ставканы растау (Modal)

Мазмұны: оқиға, коэффициент, сомасы, әлеуетті ұтыс, коэффициенттің қолданылу мерзімі.
«Растау» (primary), «Болдырмау» түймешіктері.
Кідіріс үлгісі> 3 с: «Растауды күтеміз»... мәтіні; коэффициент өзгерген кезде - адал жаңартылған.

10. 2 Кэшаут (Modal/Sheet)

Ағымдағы кэшаут сомасын және терезе таймерін көрсету.
Растау + мүмкін Undo (егер регламент мүмкіндік берсе).

10. 3 Төлем әдісін таңдау (Drawer)

Комиссиялармен/ЕА-мен әдістердің тізімі; → шағын пішінді таңдау.
Әдетті сақтау; енгізілген деректерді жоғалтпай қайтару.

10. 4 KYC (Drawer → Modal)

Құжаттарды/кеңестерді қотару үшін Drawer.
Аяқталмаған қотарумен жабу әрекеті кезінде Modal: сақталмаған туралы ескерту.

10. 5 Жауапты ойынның лимиттері (Modal)

«Күн/Апта/Ай» радиосы, сома жолы, «Арқылы күшіне енеді»...

11) Қарсы үлгілер

Ішкі модалдар (modal үстінен modal). Бір диалогты немесе қадамдар тізбегін пайдаланыңыз.
Әдеттегі мазмұнды көру модалы (жақсы drawer/бет).
Жасырын крестик немесе тек «микрозон» бойынша жабу.
Қатерлі әрекет → «фон бойынша» жабу рұқсаты.
Модальдегі ұзын пішін (→ жеке экранға/панельге шығарыңыз).
Триггерге фокусты қайтарудың болмауы.

12) Дизайн-жүйе токендері (мысал)

json
{
"dialog": {
"radius": 12,
"shadow": "var(--elev-4)",
"sizes": { "s": 520, "m": 680, "l": 840 },
"backdropOpacity": 0. 5,
"padding": "20 24",
"gap": 16
},
"drawer": {
"width": { "s": 360, "m": 480, "l": 640 },
"edge": "right",
"radius": 12,
"shadow": "var(--elev-4)"
},
"motion": {
"inMs": 160,
"outMs": 120,
"ease": "cubic-bezier(0. 2,0,0. 2,1)",
"reduce": true
},
"a11y": {
"useAriaModal": true,
"focusTrap": true,
"returnFocus": true
}
}

css
.backdrop[data-open]{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:saturate(80%); opacity:1; transition:opacity. 16s}
.dialog,[data-drawer]{position:fixed; background:var(--bg-elevated); border-radius:12px; box-shadow:var(--elev-4);}
.dialog{inset:auto; left:50%;top:50%;transform:translate(-50%,-50%); max-width:840px; width:min(100% - 32px, var(--dialog-w,680px));}
[data-drawer="right"]{top:0; right:0; height:100%;width:var(--drawer-w,480px); transform:translateX(0)}
.dialog[hidden],.backdrop[hidden]{display:none}

13) Мінез-құлық сниппеттері

js const openBtn = document. getElementById('open');
const dlg = document. querySelector('.dialog');
let prevFocus;

function openDialog() {
prevFocus = document. activeElement;
dlg. hidden = false; document. body. style. overflow = 'hidden';
const focusable = dlg. querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
(focusable[0]        dlg). focus();
function onKey(e){
if(e. key==='Escape') return closeDialog();
if(e. key!=='Tab') return;
const first = focusable[0], last = focusable[focusable. length-1];
if(e. shiftKey && document. activeElement===first){ e. preventDefault(); last. focus(); }
else if(!e.shiftKey && document. activeElement===last){ e. preventDefault(); first. focus(); }
}
dlg. addEventListener('keydown', onKey);
dlg. dataset. off = ()=> dlg. removeEventListener('keydown', onKey);
}
function closeDialog() {
dlg. dataset. off && dlg. dataset. off();
dlg. hidden = true; document. body. style. overflow = '';
prevFocus && prevFocus. focus();
}

js let startY=0, delta=0;
const sheet = document. querySelector('.sheet');
sheet. addEventListener('touchstart', e => startY = e. touches[0].clientY);
sheet. addEventListener('touchmove', e => {
delta = Math. max(0, e. touches[0].clientY - startY);
sheet. style. transform = `translateY(${delta}px)`;
});
sheet. addEventListener('touchend', () => {
if (delta > 120) sheet. classList. remove('open'); else sheet. style. transform = '';
delta = 0;
});

14) Метрика және эксперименттер

Модалдар бойынша Open Rate/Completion Rate: қаншасы ашылып, аяқталды.
Time-to-Decision: ашудан бастап Primary басуға дейін.
Dismiss Rate және себептері (Esc/фон бойынша жабу vs «Болдырмау»).
busy-сценарийлердегі Error/Retry Rate.
A/B: modal vs drawer, CTA мәтіні, өріс тәртібі, «растау» vs «undo».

15) QA-чек парағы

Қол жетімділік

• 'role = «dialog»', 'aria-modal = «true»', дұрыс 'aria-labelledby/-describedby'.
• Focus trap жұмыс істейді; фокус триггерге оралады.
• Esc жабады (егер рұқсат етілсе); Tab циклді.
• Контраст ≥ AA; тек түс қана мағынаны білдірмейді.

Мінез-құлық

• TTFF ≤ 100 мс; анимациялар in 120-180 мс/out 80-140 мс.
• Scroll-lock беті «секірместен».
• Лас пішінде Unsaved-guard.
• Busy-күйі, дұрыс Retry/қателер.

Интерфейс

• Анық тақырып және бір Primary-CTA.
• Крестик/« Жабу »түймешігі қол жетімді.
• Өлшемдері бейімделеді; мобильде - ишаратпен sheet.

Көрініс

• /z-index порталдары дұрыс; «мөлдірсіз».
• Жалқау бастамашылық; тек transform/opacity анимацияланады.

16) Дизайн-жүйедегі құжаттама

Компоненттер: 'Modal', 'Drawer/Sheet', 'ConfirmDialog', 'UnsavedGuard'.
Белгілер: өлшемдер, шегіністер, көлеңкелер, анимациялар, backdrop, focus-ring.
Гайды: «modal vs drawer», копирайтинг үлгілері, тәуекелді әрекеттер (confirm/undo), scroll-lock және portals, reduce-motion.
Do/Don 't-галереясы: nested modals (don' t), модалкадағы ұзын пішіндер (don 't), контексті кеңейтуге арналған sheet (do).

Қысқаша түйіндеме

Модалка - толық назар аударылатын шешімдер үшін, drawer - ағынды үзбей контексті кеңейту үшін. Құрылымды қарапайым, CTA - бір мағыналы, ал өзара әрекеттестікті болжамды және қолжетімді ұстаңыз. Өнерді құрметтеңіз, өңді бұғаттаңыз және фокусты қайтарыңыз. iGaming сценарийлерінде бұл тікелей сенімге әсер етеді: мөлшерлемелерді растау, кэшаут, төлем әдісін таңдау және KYC адал, жылдам және қауіпсіз болуы тиіс.