Side Sheet

Otevřít ve Figmě

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.

Polo-transparentní pozadí (backdrop). Lze nastavit pro zavření kliknutím
Hlavička s ikonou, titulkem a description
Obsah side sheetu
Zavírací tlačítko
Levá action zóna
Pravá action zóna

Použití

Kdy použít

Pro detailní obsah bez přerušení hlavního kontextu.
Pokud potřebuješ rychlý přístup k nastavením nebo filtrům.
Jako alternativu k dialogu, když obsah potřebuje více prostoru.
Pro načítání obsahu z jiné domény (architektura Microfrontendů)

Kdy nepoužívat

Pro kritické akce vyžadující plnou pozornost (tam je lepší modal).
Pokud má obsah trvalý význam pro celou stránku (pak je lepší sidebar).

Varianty

Základní varianta (Narrow)

Ú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)

Live preview

Zvolit téma:

Wide

Široká varianta side sheetu pro komplexnější obsah, detailní formuláře nebo když potřebujete více prostoru pro zobrazení informací.

Live preview

Zvolit téma:

Nesting

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.

Live preview

Zvolit téma:

Close on backdrop click

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í.

Live preview

Zvolit téma:

Chování

Vlastnost fixedFooter

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.

Chování při fixedFooter = false (výchozí)

Tlačítka ve footeru jsou součástí toku obsahu.
Footer je vždy zarovnán pod obsahem.
Pokud je obsah sidesheetu delší než samotný panel, footer se „přilepí“ ke spodnímu okraji při scrollování (tzv. sticky behavior).
Celý obsah sidesheetu je možné scrollovat.

Vhodné pro: Formuláře a stránky s kratším nebo středně dlouhým obsahem.

Chování při fixedFooter = true

Footer je pevně ukotven ke spodní hraně sidesheetu, nezávisle na délce obsahu.
Obsah sidesheetu se scrolluje samostatně, zatímco tlačítka zůstávají vždy viditelná.
Umožňuje rychlý přístup k akčním tlačítkům i při dlouhých formulářích.

Vhodné pro: Dlouhé nebo komplexní formuláře, kde má být footer stále přístupný.

Responsivita

Side Sheet se automaticky přizpůsobuje velikosti obrazovky pomocí breakpointů.

Live preview

Zvolit téma: