# 04 · UX pattern kataloqu > Layihələrdən çıxarılmış və şablonda kodlaşdırılmış qərarlar. > Hər pattern: **nə vaxt → necə → nə üçün → qadağan olan**. --- ## 1. Dörd vəziyyət qaydası 🔴 Məlumat çəkən **hər** komponent dörd vəziyyəti daşımalıdır. Üçü yazılıb dördüncüsü unudulursa, istifadəçi sonsuz spinner görür. | Vəziyyət | Görünüş | Məcburi element | |---|---|---| | **Yüklənir** | skeleton — real sətir hündürlüyünü təkrarlayır | layout sıçramır | | **Boş** | ikon + başlıq + bir cümlə izah | **birinci addım düyməsi** | | **Xəta** | səbəb + sorğu ID | **«Yenidən cəhd et»** | | **Dolu** | məzmun | — | Beşinci hal: **axtarış nəticəsi boşdur** — «heç nə yoxdur»dan fərqlidir, çünki həlli fərqlidir («filtri sıfırla», «arxivdə də axtar»). ❌ Tam ekran spinner · ❌ «Xəta baş verdi» (səbəbsiz) · ❌ boş cədvəl gövdəsi **Şablon:** `../reference-previews/crud-list.html` --- ## 2. CRUD siyahısı ``` PageHeader başlıq · lede · əsas CTA (bir dənə) Filtr sətri status tabları (sayı ilə) + axtarış + sıralama DataTable sütunlar sabit sıra ilə, rəqəm sütunları sağa yığılmış və mono RowActions ≤2 görünən, qalanı ⋯ menyusunda Səhifələmə «124 sətirdən 1–4» + əvvəlki/növbəti ``` Qaydalar: - Filtr tabları **sayı göstərir** — istifadəçi kliklədikdən sonra deyil, əvvəl bilir. - Sütun başlığı `uppercase`, `--size-2xs`, `--text-muted`. - Seçilmiş sətir `--selected`, hover `--hover-veil` — ikisi fərqli olmalıdır. - Ad sütununun altında ikinci sətirdə kontekst (son əməliyyat tarixi və s.). - Cədvəl **öz konteynerində** üfüqi scroll edir, səhifə yox. --- ## 3. Forma | Qayda | Səbəb | |---|---| | Etiket sahənin **üstündə**, sol yox | AZ/RU mətn uzunluğu dəyişkəndir, sol etiket sıçrayır | | Məcburi sahə `*` ilə, opsional yazılmır | Az işarə = az səs-küy | | Validasiya **blur-da**, hər hərfdə yox | Yazarkən qırmızı görmək əsəbiləşdirir | | Xəta mesajı sahənin altında, `aria-describedby` ilə bağlı | Ekran oxuyucu görür | | Forma səviyyəli xəta yuxarıda, `role="alert"` | Fokus itmir | | Submit düyməsi sağda, ləğv solunda və neytral | Dağıdıcı olmayan seçim əlçatan qalır | | İki sütun yalnız qısa sahələr üçün | Uzun mətn sahəsi tam eni tutur | | `autocomplete` atributları düzgün | Parol menecerləri işləsin | **Şablon:** `../reference-previews/form-modal.html` --- ## 4. Modal siyasəti 🔴 > Mənbə: `Shared/.claude/rules/frontend-modal-policy.md` Modal **yalnız** bunlarla bağlanır: başlıqdakı `✕`, footer-dəki «Ləğv et», uğurlu əməliyyat sonrası proqramatik bağlanma. ❌ Backdrop kliki · ❌ ESC (istifadəçi açıq icazə verməsə) · ❌ avtomatik timeout **İstisna** (açıq komentari ilə): şəkil lightbox, tooltip popover, kontekst menyu — məlumat itkisi yoxdur. Təsdiq dialoqunda nəticə **konkret rəqəmlə** yazılır: «6 sətir silinəcək», «qalıqlar dəyişəcək», sonra «Bu əməliyyat geri qaytarılmır». --- ## 5. Naviqasiya | Səviyyə | Element | |---|---| | Qlobal | Sidebar — qruplaşdırılmış, ≤6 qrup, aktiv element `--primary-subtle` + sol kənar zolağı | | Kontekst | Breadcrumb — 3 səviyyədən dərində məcburi | | Səhifədaxili | Tab / segment — ≤5 element, çoxdursa seçici | | Sürətli | `Ctrl/Cmd + K` komanda paneli | - Aktiv element `aria-current="page"` daşıyır. - Sidebar yığılanda yalnız ikon qalır, hover-da tooltip çıxır. - `<64rem` — sidebar overlay olur, arxa fon `--overlay`, ESC və backdrop **bağlayır** (modal deyil, naviqasiyadır). --- ## 6. Cədvəl vs kart | Şərt | Seçim | |---|---| | Sütunlar müqayisə olunur, 5+ sahə | **Cədvəl** | | Hər element vizual (şəkil, avatar) | **Kart** | | Mobil, 3-dən çox sahə | **Kart siyahısı** (cədvəl çevrilir) | | Sıralama/filtr vacibdir | **Cədvəl** | --- ## 7. Bildiriş iyerarxiyası | Ağırlıq | Forma | Nə vaxt | |---|---|---| | Aşağı | inline mətn dəyişikliyi | «Yadda saxlanıldı» sahə yanında | | Orta | toast, 3 san, `--success` | uğurlu əməliyyat | | Yüksək | forma alert-i, avtomatik itmir | validasiya, server xətası | | Kritik | modal | data itkisi riski, təsdiq | Toast heç vaxt xəta üçün istifadə olunmur — istifadəçi oxumağa macal tapmır. --- ## 8. Sıxlıq | Kontekst | Sətir hündürlüyü | Baza şrift | |---|---|---| | Sənəd/qurum ekranı | rahat | `--size-base` (clinical skin) | | Biznes cədvəli | sıx | `--size-sm` | | Operator terminalı | çox sıx, iri toxunma hədəfi | `--size-sm`, düymə ≥44px | Sıxlığı artırmaq üçün şrift kiçildilmir — **boşluq** azaldılır. Şrift `--size-sm`-dən aşağı düşmür. --- ## 9. Rəqəmlər və tarixlər - Rəqəm sütunu **sağa yığılır**, `--font-mono`, `tabular-nums`. - Valyuta simvolu dəyərdən sonra: `18 420,00 ₼`. - Minlik ayırıcı — boşluq, onluq — vergül (AZ locale). - Tarix `23.08.2026`, saat `14:02`; nisbi vaxt («2 saat əvvəl») yalnız 24 saatdan yenidirsə. - Mənfi dəyər `--danger` rəngi **və** `−` işarəsi ilə. --- ## 10. Yükləmə strategiyası | Müddət | Nə göstərilir | |---|---| | < 300ms | heç nə — göstərmək titrəmə yaradır | | 300ms – 3s | skeleton | | > 3s | skeleton + «Hazırlanır…» mətni | | > 10s | proqres və ya arxa fona keçirmə təklifi | --- ## 11. Sürükləmə (lövhə) - `transform` üzərində, layout xassələri animasiya olunmur. - Buraxma yeri kəsik sərhədli, `--primary-subtle` fonlu göstərici ilə işarələnir. - Klaviatura alternativi məcburi: element seçilir, ox düymələri ilə köçürülür. - `prefers-reduced-motion` → keçid ani. **Şablon:** `../reference-previews/board.html` --- ## 12. Anti-pattern siyahısı | ❌ | ✅ | |---|---| | Sərt kodlanmış `#hex` | `var(--primary)` | | `div` üzərində `onClick` | `