Nesting obalových komponent

Vrstvení panelů a Vrstvení panelů a containerů do více úrovní je možné při dodržení předepsaného pořadí variant. Správné dodržení variant je kritické pro správnou komunikaci hierarchie dat na stránce uživateli.

Základní pravidla pro vrstvení panelů a containerů

Každá obalová komponenta má nastavení úrovní = Level. Úrovně jsou base, outline a contrast.
Není dovolené vrstvit panely a containery stejné úrovně!
Není dovolené vrstvit na sebe panely a další obalové komponenty stejné úrovně.
Toto pravidla platí pro všechny obalové komponenty a jejich kombinace, do kterých je možné vkládat další úrovně.

Komponenty do kterých můžu vkládat úrovně obsahu

accordeon
panel
container
tile
modal
sidesheet
searchresults
sectionheader

Ukázka nestingu jednotlivých úrovní

1. level

První level panelů a containerů a dalších obalových komponent je vždy Base.

2. level

Druhý level je standardně Outline.
Druhý level je standardně Outline. V závislosti na rozhodnutí UX designera pro konkrétní use-case může být také Contrast.

3. level

Třetí level je standardně Constrast.
V závislosti na typu panelu použitého na levelu dva je povolené na levelu 3 použít nastavení Outline nebo Contrast.

Omezení

Není dovolené umístit level Base na jinou úroveň než 1. a není dovolené vrstvit dvě stejné úrovně panelu/containeru, protože dochází ke slévání obsahu kvůli vizuálu variant. Například:

Pokud je na levelu 2 outline, na levelu 3 nemůže být také outline.
Pokud je na levelu 2 contrast, na levelu 3 nemůže být také contrast

Nikdy nesmí být na druhé úrovni level Base.

Nikdy nesmí být na třetí úrovni level Base, nebo level který je stejný jako předcházející.

4. a další level

Z důvodu nároků na horizontální prostor se nedoporučuje používat více úrovní zanoření obsahu
Pokud je to z důvodů například kompikované struktury obsahu nezbytné, je třeba dodržet pravidla. Vždy se musí použít odpovídající úroveň tak aby nebyla v konfliktu s úrovní předcházející.
To znamená: Base → Outline → Contrast → Outline → Contrast → Outline → Contrast → Outline Contrast NEBO Base → Contrast → Outline → Contrast → Outline a tak dále.

Kombinace s overlay komponentami

Uvnitř komponent Modal a Sidesheet je možné používat containery a panely.
v takovém případě se Sidesheet a Modal počítá jako level Base.
Všechny další obalové komponenty v nich umístěné se řídí pravidlem pro level 2.