Modal

Použité komponenty

Použití

Kdy používáme

• Pokud je potřeba získat jasné potvrzení od uživatele (delete, submit).
• Pro krátké úkoly nebo doplňující formuláře.
• Pro upozornění na kritické informace (např. chyba, varování).
• Pro načítání obsahu z jiné domény (architektura Microfrontendů)

Kdy nepoužíváme

• Pro rozsáhlý obsah nebo dlouhé formuláře (lepší je side sheet nebo samostatná stránka).
• Pokud akce není dostatečně důležitá → modal je intruzivní.
• Pokud by příliš časté používání rušilo uživatelský tok.

Varianty

Základní varianta

Základní modal s hlavičkou, obsahem a action zónou.

Zavření kliknutím na pozadí

Modal lze nakonfigurovat tak, aby se zavřel při kliknutí na tmavé pozadí (backdrop).

Posuvný modal

Modal lze posouvat za záhlaví na různá místa obrazovky.

Maximalizovatelný modal

Modal s možností maximalizace na celou obrazovku s drobným okrajem.

Minimize

• Modal je možné ve specifických případech minimalizovat.
• Modal se minimalizuje pomocí funkce minimize komponenty.
• Zpětné vyvolání minimalizovaného modalu se děje přes button v komponentě Dock.
• Toto chování je součástí pouze specifických patternů. Například bug reporting.

Window

Modal s možností maximalizace na celou obrazovku bez okraje.

Info varianta

Modal s hlavičkou, obsahem ale bez action zóny. Používá se pro zobrazení informací, které nevyžadují potvrzení.

Responsivita

Modal automaticky přizpůsobuje svou šířku velikosti obrazovky pomocí breakpointů. Na menších zařízeních zabírá více místa pro lepší použitelnost.

Long text

Pokud obsah modalu přesáhne výšku viewportu, automaticky se zobrazí scrollbar pro procházení obsahu.

Rotate

na mobilu s parametrem rotate=true lze mít modal o 90 stupňů otočený.