Kebechet.Blazor.ClassBuilder 1.2.1

Blazor.ClassBuilder

A fluent builder library for constructing CSS classes, inline styles, and HTML attributes in Blazor components.

Features

• ClassBuilder - Build CSS class strings with conditional logic
• StyleBuilder - Build inline CSS styles with type-safe numeric values
• AttributeBuilder - Build HTML attribute dictionaries
• ToCssString - Extension for locale-safe CSS numeric values

Installation

dotnet add package Kebechet.Blazor.ClassBuilder

Quick Start

@using Blazor.ClassBuilder
@using Blazor.ClassBuilder.Extensions

// Classes
var css = new ClassBuilder("btn")
    .AddIf(isActive, "active")
    .Build(); // "btn active"

// Styles
var style = new StyleBuilder()
    .Add("color", "red")
    .Add("width", 50.5, "%")
    .Build(); // "color: red; width: 50.5%;"

// Attributes
var attrs = new AttributeBuilder()
    .Add("type", "button")
    .AddIf(isDisabled, "disabled")
    .Build(); // Dictionary<string, object>

ClassBuilder

Build CSS class strings with a fluent API:

// Basic usage
var css = new ClassBuilder()
    .Add("btn")
    .Add("btn-primary")
    .Build(); // "btn btn-primary"

// Multiple classes at once
var css = new ClassBuilder()
    .Add("btn", "btn-primary", "rounded")
    .Build();

// Conditional classes
var css = new ClassBuilder("btn")
    .AddIf(isActive, "active")
    .AddIf(isDisabled, "disabled")
    .Build();

// If-else logic
var css = new ClassBuilder("btn")
    .AddIfElse(isPrimary, "btn-primary", "btn-secondary")
    .Build();

// Nested conditions with actions
var css = new ClassBuilder("btn")
    .AddIf(isComplex, b => b
        .Add("complex-class")
        .Add("another-class"))
    .Build();

In Blazor Components

<div class="@CssClass">Content</div>

@code {
    [Parameter] public bool IsActive { get; set; }

    private string CssClass => new ClassBuilder("card")
        .AddIf(IsActive, "active")
        .Build();
}

StyleBuilder

Build inline CSS styles with support for numeric values:

// Basic usage
var style = new StyleBuilder()
    .Add("color", "red")
    .Add("font-size", "14px")
    .Build(); // "color: red; font-size: 14px;"

// Numeric values with units
var style = new StyleBuilder()
    .Add("width", 50.5, "%")      // "width: 50.5%;"
    .Add("margin", 10, "px")      // "margin: 10px;"
    .Add("opacity", 0.8)          // "opacity: 0.8;"
    .Add("z-index", 100)          // "z-index: 100;"
    .Build();

// Conditional styles
var style = new StyleBuilder()
    .Add("display", "block")
    .AddIf(isHidden, "visibility", "hidden")
    .AddIf(hasWidth, "width", width, "%")
    .Build();

// Raw style strings
var style = new StyleBuilder()
    .Add("color: red; font-weight: bold")
    .Build();

Locale-Safe Numeric Values

The StyleBuilder automatically handles locale differences for decimal numbers. In some locales (German, French, etc.), decimals use commas (50,5) instead of dots (50.5), which breaks CSS. StyleBuilder always outputs valid CSS with decimal points.

// Works correctly in all locales
var style = new StyleBuilder()
    .Add("width", 50.5, "%")
    .Build(); // Always "width: 50.5%;" never "width: 50,5%;"

ToCssString Extension

For inline scenarios, use the ToCssString() extension:

@using Blazor.ClassBuilder.Extensions

<div style="left: calc(@(percentage.ToCssString())% - 12px)">

In Blazor Components

<div style="@DynamicStyle">Content</div>

@code {
    [Parameter] public double Progress { get; set; }

    private string DynamicStyle => new StyleBuilder()
        .Add("width", Progress, "%")
        .Add("background", "green")
        .Build();
}

AttributeBuilder

Build HTML attribute dictionaries:

// Basic usage
var attrs = new AttributeBuilder()
    .Add("id", "my-element")
    .Add("disabled")  // Value-less attribute
    .Build();

// Conditional attributes
var attrs = new AttributeBuilder()
    .Add("type", "text")
    .AddIf(isDisabled, "disabled")
    .AddIfFilled("placeholder", text)  // Only adds if text is not null/empty
    .Build();

// Combine builders
var baseAttrs = new AttributeBuilder().Add("class", "btn");
var attrs = new AttributeBuilder()
    .Add(baseAttrs)
    .Add("type", "submit")
    .Build();

// Validation
var attrs = new AttributeBuilder()
    .Add("value", value)
    .Throw(value < 0, "Value must be positive")
    .Build();

In Blazor Components

<button @attributes="Attributes">Click me</button>

@code {
    [Parameter] public bool IsDisabled { get; set; }
    [Parameter] public string? Tooltip { get; set; }

    private Dictionary<string, object> Attributes => new AttributeBuilder()
        .Add("type", "button")
        .Add("class", "btn btn-primary")
        .AddIf(IsDisabled, "disabled")
        .AddIfFilled("title", Tooltip)
        .Build();
}

API Reference

ClassBuilder

StyleBuilder

AttributeBuilder

License

This project is licensed under the MIT license.