Container
Documentație pentru componenta FodContainer
1. Descriere Generală
FodContainer
este o componentă de layout care oferă constrângeri responsive de lățime maximă și padding orizontal pentru conținutul site-ului. Containerul centrează conținutul orizontal și se adaptează la diferite dimensiuni de ecran, oferind o experiență consistentă pe toate dispozitivele.
Componenta suportă: - Lățime maximă adaptivă bazată pe dimensiunea viewport-ului - Mod fix pentru dimensiuni predefinite - Diferite valori de lățime maximă (de la ExtraSmall la ExtraExtraLarge) - Opțiunea de a dezactiva complet lățimea maximă
2. Ghid de Utilizare API
Exemplu de utilizare de bază
<FodContainer>
<FodPaper Class="pa-4">
<FodText>Conținut centrat cu lățime maximă responsive</FodText>
</FodPaper>
</FodContainer>
Container cu lățime fixă
<FodContainer Fixed="true">
<FodPaper Class="pa-4">
<FodText>Container cu lățime fixă care se potrivește cu breakpoint-urile</FodText>
</FodPaper>
</FodContainer>
Container cu diferite dimensiuni maxime
<!-- Container Extra Small -->
<FodContainer MaxWidth="MaxWidth.ExtraSmall">
<FodPaper Class="pa-4">
<FodText>Container foarte mic (xs)</FodText>
</FodPaper>
</FodContainer>
<!-- Container Medium -->
<FodContainer MaxWidth="MaxWidth.Medium">
<FodPaper Class="pa-4">
<FodText>Container mediu (md)</FodText>
</FodPaper>
</FodContainer>
<!-- Container Extra Large -->
<FodContainer MaxWidth="MaxWidth.ExtraLarge">
<FodPaper Class="pa-4">
<FodText>Container extra mare (xl)</FodText>
</FodPaper>
</FodContainer>
Container fără constrângeri de lățime
<FodContainer MaxWidth="MaxWidth.False">
<FodPaper Class="pa-4">
<FodText>Container care ocupă toată lățimea disponibilă</FodText>
</FodPaper>
</FodContainer>
Container cu conținut complex
<FodContainer MaxWidth="MaxWidth.Large">
<FodGrid>
<FodItem xs="12" sm="6" md="4">
<FodCard>
<FodCardContent>
<FodText>Card 1</FodText>
</FodCardContent>
</FodCard>
</FodItem>
<FodItem xs="12" sm="6" md="4">
<FodCard>
<FodCardContent>
<FodText>Card 2</FodText>
</FodCardContent>
</FodCard>
</FodItem>
<FodItem xs="12" sm="6" md="4">
<FodCard>
<FodCardContent>
<FodText>Card 3</FodText>
</FodCardContent>
</FodCard>
</FodItem>
</FodGrid>
</FodContainer>
Atribute disponibile
Proprietate | Tip | Descriere | Valoare Implicită |
---|---|---|---|
Fixed |
bool |
Setează lățimea maximă să se potrivească cu lățimea minimă a breakpoint-ului curent. Util pentru design-uri cu dimensiuni fixe în loc de viewport complet fluid. | false |
MaxWidth |
MaxWidth |
Determină lățimea maximă a containerului. Containerul crește odată cu dimensiunea ecranului. | MaxWidth.Large |
ChildContent |
RenderFragment |
Conținutul copil al componentei. | null |
Class |
string |
Clase CSS adiționale pentru container. | null |
Style |
string |
Stiluri CSS inline pentru container. | null |
3. Valori disponibile pentru MaxWidth
Valoare | Descriere | Breakpoint CSS |
---|---|---|
MaxWidth.ExtraSmall |
Container foarte mic | xs |
MaxWidth.Small |
Container mic | sm |
MaxWidth.Medium |
Container mediu | md |
MaxWidth.Large |
Container mare (implicit) | lg |
MaxWidth.ExtraLarge |
Container extra mare | xl |
MaxWidth.ExtraExtraLarge |
Container foarte mare | xxl |
MaxWidth.False |
Fără limită de lățime | - |
4. Note și observații
- Containerul este fluid în mod implicit, adaptându-se smooth la schimbările de dimensiune ale viewport-ului
- Când
Fixed="true"
, containerul folosește lățimi fixe predefinite care se schimbă la anumite breakpoint-uri - Pentru layout-uri full-width, folosiți
MaxWidth="MaxWidth.False"
- Containerul adaugă automat padding orizontal pentru a preveni lipirea conținutului de marginile ecranului
- Se recomandă utilizarea unui singur container principal per pagină, cu containere imbricate doar când este necesar
5. Concluzie
FodContainer
este o componentă esențială pentru crearea layout-urilor responsive în aplicațiile Blazor, oferind un control precis asupra lățimii maxime a conținutului și asigurând o experiență vizuală consistentă pe toate dispozitivele.