Toolbelt.Web.CssClassInlineBuilder 2.0.0

.NET Standard 2.1
NuGet\Install-Package Toolbelt.Web.CssClassInlineBuilder -Version 2.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
dotnet add package Toolbelt.Web.CssClassInlineBuilder --version 2.0.0
<PackageReference Include="Toolbelt.Web.CssClassInlineBuilder" Version="2.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Toolbelt.Web.CssClassInlineBuilder --version 2.0.0
#r "nuget: Toolbelt.Web.CssClassInlineBuilder, 2.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Toolbelt.Web.CssClassInlineBuilder as a Cake Addin
#addin nuget:?package=Toolbelt.Web.CssClassInlineBuilder&version=2.0.0

// Install Toolbelt.Web.CssClassInlineBuilder as a Cake Tool
#tool nuget:?package=Toolbelt.Web.CssClassInlineBuilder&version=2.0.0

CSS Class Inline Builder (designed for Blazor) NuGet Package


Build CSS class string for "class" attribute dynamically based on boolean switch and enum values, in Razor files in-line.


How to use?

1. Install the package to your project.

Package Manager Console:

PM> Install-Package Toolbelt.Web.CssClassInlineBuilder

dotnet CLI:

$ dotnet add package Toolbelt.Web.CssClassInlineBuilder

2. Declare for using "CSS class inline builder".

Add @using static Toolbelt.Web.CssClassInlineBuilder declaration in head of each .razor file which you want to use CSS class inline builder.

You can also add the declaration in _Imports.razor once, instead.

@using static Toolbelt.Web.CssClassInlineBuilder

3. Use "CssClass(...)" method to build CSS class string!

You can use the CssClass(...) method anywhere you want to build a CSS class string.

3-1. CSS class name strings

Basically, you can pass any number of CSS class name strings to the arguments of CssClass() method.

The CssClass() method returns a string that is concatenated with all of those passed to argument strings with a space separator.

<div class="@CssClass("foo", "bar")">

3-2. objects which has bool properties

Next, you can pass any number of objects (include anonymous type) that contains bool properties to the arguments of the CssClass() method.

The CssClass() method picks up the bool properties of argument objects which it values is true, and concatenate those property's name strings with space separator, and return it. (The name of properties are converted lowercase.)

<div class="@CssClass(new {Foo=true, Bar=false}, new {Fizz=true})">

As you know, the anonymous type can omit explicit property names if the name is the same with a variable name.

<div class="@CssClass(new {Foo, Bar}, new {Fizz})">

@code {
  private bool Foo = false;
  private bool Bar = true;
  private bool Fizz = true;

The property name will be converted from camel case/snake case naming convention to hyphenated lower case.

<div class="@CssClass(new {FizzBuzz})">

@code {
  private bool FizzBuzz = true;

3-3. any other type properties in an object

If you pass an object with non-boolean type properties, a CSS class name will be built for each of those properties.
That CSS class name will be concatenated with a hyphen of the property name and its property value.

@code {
  private int Stars = 5;

<div class="@CssClass(new {NumberOfStars = this.Stars})">

3-4. enum values

You can also pass any number of enum values to the arguments of the CssClass() method.

The enum value will be converted to a string to use as a CSS class name.

The name of enum value will be converted from camel case/snake case naming convention to hyphenated lower case.

@code {
  enum StateValues {

  private StateValues State = StateValues.NotReady;

<div class="@CssClass(this.State)">

Finally, you can mix those all!

You can pass mixing strings, objects, and enum values to the argument of the CssClass() method.

@code {
  enum StateValues {

  private bool Fizz = true;
  private bool Buzz = false;
  private int NumOfStars = 5;
  private StateValues State = StateValues.Complete;
<div class="@CssClass(new {Fizz, Buzz}, $"stars-{NumOfStars}", State)">


The CssClass() method uses the .NET CLR "Reflection" feature to parse the object's properties.

This means that using the CssClass() method can degrade performance.

The CssClass() method includes a caching mechanism to avoid performance degradation, but it will be better to let you know this information anyway.

Release Notes

You can see the release notes here.


Mozilla Public License Version 2.0

Product Versions
.NET net5.0 net5.0-windows net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows
.NET Core netcoreapp3.0 netcoreapp3.1
.NET Standard netstandard2.1
MonoAndroid monoandroid
MonoMac monomac
MonoTouch monotouch
Tizen tizen60
Xamarin.iOS xamarinios
Xamarin.Mac xamarinmac
Xamarin.TVOS xamarintvos
Xamarin.WatchOS xamarinwatchos
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.
  • .NETStandard 2.1

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on Toolbelt.Web.CssClassInlineBuilder:

Repository Stars
A Blazor WebAssembly app for browsing the "Awesome Blazor" resources.
Version Downloads Last updated
2.0.0 3,191 6/20/2021
1.1.1 1,045 8/27/2020
1.1.0 651 5/6/2020 422 1/3/2020

- [Breaking Change] Add support for non-boolean type properties in an object.