Bug Tracker Active
Side Sheet
Side Sheet je panel vysouvající se z okraje obrazovky (zprava), který slouží k zobrazení dodatečného obsahu, aniž by uživatel musel opustit aktuální kontext.
WCAG 2.2Klávesnice
Preview téma:
Přihlásit
Jak zarovnáváme CTA buttony a akční zóny v Modalech a Sidesheetech
Úzká varianta side sheetu vhodná pro jednodušší obsah. Jeho velikost je 768px. Defaultně se side sheet zavírá potvrzovací akcí. Zavřením přes křížek se zavře bez uložením dat (Pokud potřebujete zachytit událost zavření pro uložení dat, můžete to provést pomocí vyvolání Confirmačního dialogu)
Široká varianta side sheetu pro komplexnější obsah, detailní formuláře nebo když potřebujete více prostoru pro zobrazení informací.
V případě potřeby se sidesheety dají vrstvit přes sebe. Každý nový vyvolaný sidesheet je o 24px menší než původní, tak aby byl vidět kus původního.
Side Sheet lze nakonfigurovat tak, aby se zavřel při kliknutí na pozadí (backdrop). Toto chování je volitelné a závisí na kontextu použití.
Side Sheet se může vysouvat zezdola. Parametr bottom.
Side Sheet zobrazuje scroll bar při obsahu, jež je delší než samotný panel.
Jak už bylo řečeno, obsahem panelu může být cokoliv – např. Vertical Steps.
Vlastnost fixedFooter určuje chování patičky (footeru) v závislosti na délce obsahu sidesheetu. Byla zavedena už při prvotním návrhu komponenty jako řešení pro případy s dlouhým obsahem.
Vhodné pro: Formuláře a stránky s kratším nebo středně dlouhým obsahem.
Vhodné pro: Dlouhé nebo komplexní formuláře, kde má být footer stále přístupný.
Side Sheet se automaticky přizpůsobuje velikosti obrazovky pomocí breakpointů.
Responzivní variantu Sidesheet lze zobrazit v plné šířce - position: left, nebo position: bottom-left kdy se Sidesheet zobrazuje ze spodního okraje a zabírá 50% vertikálního prostoru na displeji.
