Máme base, info, success, warning a danger. Kdy použít jakou variantu je dovysvětleno v záložce Textace.
Ve variantě hug
má Message Box vždy pevnou výšku (76px). Text je zkrácen na požadovanou délku a pro jeho zobrazení slouží button “zobrazit více”. Varianta fixed
naopak zobrazuje celý text.
Pro obsah se běžně používá plain text (vč. podpory emotikon), ale do obsahu lze dát i HTML. Pokud je HTML použito, tak v tomto případě není zobrazeno show more. Obsah je vždy zobrazen celý. Obsahem může být jakkýkoliv HTML obsah – tedy bullet seznamy, obrázky, ikony, tabulky, grafiky atd.
Doporučené je používat základní variantu, která se je umístěna v rámci obsahu stránky/containerů. Používá se pro běžné potvrzovací a informační zprávy nebo inline validace ve formulářích. Minimální šířka messageboxu by měla být 370 px.
MessageBox má vlastnost autohide=true
, která umožnuje nastavit automatické
skrytí zprávy za 10 sekund. Při návrhu je proto doporučeno použít anotaci ve
Figmě, aby vývojář věděl, že má tuto vlastnost použít.
Pro případy zobrazení důležité a trvalé informace má MessageBox volitelnou vlastnost sticky=true
. Sticky Messagebox je umístěn přes obsah stránky při horním okraji (šířka celé stránky mimo navigační menu. Samozřejmě respektuje jakékoliv nadřazené komponenty (např. sticky header), takže poud je použit zobrazuje se pod ním. Hodnota Z-index je 2000 a umožňuje překrývání obsahu stránky. Pokud je případ, kdy se sejde více Sticky Message Boxů, které se stackují pod sebe, tak gap mezi nimi je Spacing:16px
Prioritizace: Pokud je více sticky message boxů, upřednostňují se nejdůležitější (např. chybové)
Kdy použít sticky variantu? Systémové chyby, například upozornění na výpadky, důležité informace, které je nutné zachovat na stránce, bezpečnostní varování.
Varianty Messageboxu hug a fixed jsou nastavené tak aby se zalamoval obsah zpráv a tlačítka podle šířky. Minimální šířka messageboxu by měla být 370 px. Textový obsah má nastavenou minimální šířku 260 px