Record view
Markup canonic · components/record-view.json
Cafenea Origo
Cafea cu clientul
- Sumă
- 58,50 Lei
Compoziția · un modal care doar citește
Pattern, nu componentă: o aranjare a unor piese care există deja — Modal și Quantum stack. Se deschide dintr-un rând (o listă, un tabel) și arată o singură înregistrare. Antetul apare imediat, din ce spune deja rândul; doar corpul se încarcă. Formalizat din RecordViewDialog în Dublin, care îl folosește pentru detaliile unei cheltuieli și ale unei facturi.
.modal-backdrop.open └─ .modal.record-view 440px · suprafața, padding-ul și X-ul sunt ale .modal ├─ .btn.outline.sm.icon-only X — închide, ca Esc și click-ul în afară ├─ .t-eyebrow + .dot felul înregistrării — „Cheltuială" ↓ 8px │ └─ .record-view-ref numărul ei, opțional — „YB-0142", cifre tabulare ├─ .modal-title numele ei — furnizorul, clientul ↓ 6px ├─ .modal-body descrierea, opțională ↓ 16px └─ .quantum-stack faptele — sau .record-view-state cât se încarcă
Live · cele trei stări
Același dialog, deschis în fiecare stare — ca demo-ul din showcase-ul lui Dublin. Închide cu X, click în afară sau Escape: e doar citire, deci nu există text tastat de pierdut.
Cafenea Origo
Cafea cu clientul
Nu am putut încărca cheltuiala.
Stările · corpul își ține locul
Cât se încarcă sau dacă a eșuat, corpul e un .record-view-state: înalt cât trei grupuri de un rând (192px), cu un .spinner sau cu o propoziție .t14 la mijloc — ca dialogul să nu sară când sosește corpul. Antetul nu așteaptă.
Cafenea Origo
Cafenea Origo
Nu am putut încărca cheltuiala.
Factura · numărul în eyebrow, cronologia într-un bloc
O înregistrare care are număr îl poartă după felul ei, în eyebrow: .record-view-ref, în cifre tabulare, la 14px de fel (gap-ul de 8px al .t-eyebrow + 6px, ca în Dublin). Titlul rămâne numele — clientul. Corpul e aceeași stivă, cu Viața facturii ca .quantum-block ținând o Timeline, iar descărcarea ca valoare-acțiune.
Cortex Analytics
Integrare API
- Sumă
- 12.400,00 Lei
- Emisă
- CUI client
- RO38119245
- Viața facturii
-
- Emisă
- Se trimite în e-Factura
- Așteaptă plata
- Document
- Descarcă
Reguli
Fără rând de acțiuni. O acțiune pe înregistrare e o valoare-acțiune în stivă (.quantum-action); editarea e un alt .modal, cu formular.
Spre deosebire de un modal de formular: nu există text tastat de pierdut. X, Escape și click-ul pe scrim închid deopotrivă.
40 sub cei 480 ai modalului: perechile etichetă–valoare au nevoie de mai puțină lățime decât un formular, iar un card mai îngust ține eticheta aproape de valoare.
Stiva stă tot la 16px sub titlu, iar dialogul spune că n-are descriere (fără aria-describedby).