Ludo Programming

În Blazor, componentele sunt elementele de bază pentru organizarea și reutilizarea codului UI. O componentă este un fișier .razor care poate conține HTML, C# și alte componente. Acestea fac aplicația mai modulară, mai ușor de întreținut și mai scalabilă.

🔧 Cum definim o componentă în Blazor?

Creăm un nou fișier .razor – de exemplu, CardComponent.razor – și îl populăm cu markup și logică:

<div class="card">
    <h3>@Titlu</h3>
    <p>@Continut</p>
</div>

@code {
    [Parameter]
    public string Titlu { get; set; }

    [Parameter]
    public string Continut { get; set; }
}

📥 Ce sunt [Parameter]?

Atributele [Parameter] permit componentelor să primească date din exterior (adică de la alte componente/pagini care le folosesc).

▶️ Cum folosim o componentă?

După ce ai definit componenta, o poți folosi simplu oriunde în aplicație:

<CardComponent Titlu="Salut!" Continut="Aceasta este o componentă reutilizabilă." />

Poți crea mai multe instanțe, fiecare cu propriile date.

💡 Exemplu alternativ: AlertComponent

<div class="alert @CssClass">
    @Text
</div>

@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public string CssClass { get; set; } = "alert-info";
}

Utilizare:

<AlertComponent Text="Operațiune reușită!" CssClass="alert-success" />
<AlertComponent Text="Eroare la procesare." CssClass="alert-danger" />

🧠 Concluzie

Componentele îți oferă un mod elegant de a reutiliza și organiza interfața. Prin [Parameter], poți crea elemente flexibile și personalizabile. În următorul articol vom vedea cum gestionăm datele între componente (EventCallback & state lifting).