Loading...
Container má dvě velikostní varianty: Base a Small. Liší se velikostí horizontálního a vertikálního paddingu.
Stav active lze nastavit na true nebo false. Hodnota true označuje Container jako aktivní, například pokud uživatel vybral obsah uvnitř Containeru a je potřeba tento obsah odlišit od okolního.
Funkce CustomBgColor umožňuje nastavit vlastní fill pozadí Containeru. Nejde o variantu komponenty, ale o vlastní přepsání hodnoty variable. Změnu proto designer vždy komunikuje i s FE developerem.
Používejte pouze variables z knihovny design systému a vždy odstín .100. Světlý odstín zachovává kontrast vůči dalším komponentám s jemným barevným pozadím, například Tag nebo Button ve variantě Secondary.
CustomBgColor je povoleno pouze pro variantu Contrast. Tato varianta nemá stín ani outline, proto vlastní barva pozadí nenaruší její vizuální hierarchii.
| Název barvy | Variable |
|---|---|
| Red | color.red.100 |
| Orange | color.orange.100 |
| Blue | color.blue.100 |
| Green | color.green.100 |
| Apple Green | color.applegreen.100 |
| Emerald Green | color.emeraldgreen.100 |
| Celestial Blue | color.celestialblue.100 |
| Majorelle Blue | color.majorelleblue.100 |
| Electric Purple | color.electricpurple.100 |
| Sandy Brown | color.sandybrown.100 |
| Indian Red | color.indianred.100 |
| Citrine | color.citrine.100 |
Příklad hierarchické struktury, jak se containery mohou vnořit do sebe pro komplexnější organizaci obsahu.
Příklady a pravidla pro vnořování úrovní najdete v patternu Nesting obalových komponent.
Container se automaticky přizpůsobuje různým velikostem obrazovky.