Conditional Blazor Styles (without the if statements)

If you’re building Blazor components you’re probably used to driving the UI from data.

At its simplest this might be to show a value in the UI using one-way binding:

<h1>Hello @name</h1>

@code {
    string name = "Mae";
}

But what if you want to alter the appearance of the component, beyond just showing data, say to change the colour of a border, or background, in response to a value found in the data?

For that we need a little conditional logic, and the ability to provide different CSS classes for different scenarios.

Here’s a simple example.

Let’s say we have a list of Panels, and some of those panels are flagged up as ‘important’

Dashboard.razor

@code {

    List<Panel> panels = new List<Panel> {
        new Panel { Important = true, Heading = "A Panel", Text = "Look, a Panel" },
        new Panel { Heading = "Another Panel", Text = "Another one?" }
    };

    class Panel
    {
        public string Heading { get; set; }
        public string Text { get; set; }
        public bool Important { get; set; }
    }
}

Render different UI depending on the flag#

From here we can update our markup to read that flag and render something different…

There are a few ways to handle this.

We could put some sort of conditional code in the markup itself, using if statements.

In practice this would likely lead to some duplicated markup as we attempt to render different div elements based on the Important flag.

We could render an entirely different panel component (we could create an ImportantPanel and a ‘regular’ Panel).

I might consider this if Important panels had a bit more specific UI and/or logic.

But in this case, for the sake of a slightly different looking border, an entirely separate component seems like overkill.

My preferred “simplest first step” approach here is to create a method in @code which returns a string with any additional CSS classes we want our card component to use.

@code {

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

    ...
}

Now if we invoke this cardClass method, and give it an instance of Panel it will use the Panel’s Important flag to decide whether to return the border-danger CSS class or not.

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

string cardClass(Panel panel) {
    return panel.Important ? "border-danger" : "";
}

Finally, we can call this cardClass method in our markup.

<div class="card @cardClass(panel)">
    <div class="card-header">
        @panel.Heading
    </div>
    <div class="card-body">
        <div class="card-text">
            @panel.Text
        </div>
    </div>
</div>

Now we can have angry looking red-bordered panels, simply by setting our panel’s Important flag to true.