Amanoba Logo
Back to Course

Variánsok és állapotlogika

Day 18 of 30 · The Playbook 2026 – Mesterkurzus Designereknek

Definiálod a komponens variánsait és állapotát: méret, típus, állapot mátrix.

Tanulási cél

  • Variáns-mátrix: méret (sm/md/lg), típus (primary/secondary/ghost), állapot (default/hover/focus/active/disabled/loading).
  • Állapot-szabályok: mi változik (szín, keret, árnyék, ikon).
  • Disable/Loading: interakció tiltása, skeleton vagy semleges stílus.
  • Dokumentált példák + tiltások.

Miért fontos

  • Variancia nélkül a design rendszer törékeny.
  • Állapotlogika adja az affordance-t.
  • Könnyebb fejlesztés: táblázatból dolgoznak.

Magyarázat

  • Mátrix: sorok = állapotok, oszlopok = variánsok.
  • Szabály: mi NEM változik (pl. radius fix).
  • Disabled: kontraszt csökkent, kurzor default, shadow off.

Példák

Rossz: Hover néha sötétít, néha világosít, nincs szabály.

Jó: Táblázatban rögzített színek/árnyékok minden állapotra.

Gyakorlat (vezetett)

  1. Készíts egy gomb variáns-állapot táblát.
  2. Írd le: mit változtatsz hover/focus/active/disabled/loading állapotban.
  3. Dokumentáld tiltásokat (pl. ghost + disabled kontrasztkövetelmény).

Gyakorlat (önálló)

Implementálj egy komponenst a táblázat alapján, screenshotold állapotonként.

Önellenőrzés

  • Variáns-állapot mátrix elkészült.
  • Szabályok következetesek.
  • Dokumentáció linkelve.

Opcionális mélyítés