Previous tip (Pass parameters when rendering components dynamically) Next tip (Toggle Prerendering off) >>

Employ a little conditional CSS to shake up your UI

If you need your Blazor UI’s visual style to change (in response to data) consider invoking a method which returns CSS class names.

When your component is rendered the method will be evaluated and the CSS classes returned/applied.

Expression-bodied lambdas (a terser way of defining a method) are especially useful here.

<div class="card @cardClass(panel)">
    ...
</div>

@code {

  string cardClass(Panel panel)
     => panel.Important
        ? "border-danger" : "";

   ...
}