BlazorX.Components 1.3.2

BlazorX Components

A modern, high-performance Blazor component library built on Bootstrap 5

Documentation • Installation • Components • Examples

📋 Table of Contents

• About
• Features
• Installation
• Quick Start
• Components
• Project Structure
• Documentation
• Contributing
• License

🎯 About

BlazorX is a comprehensive component library for Blazor applications, built on top of the Bootstrap 5 CSS framework. It provides a rich set of interactive, accessible, and highly customizable components designed to accelerate your Blazor development.

Why BlazorX?

• ✨ Modern Architecture - Built with the latest .NET 8 and .NET 9
• 🎨 Bootstrap 5 Integration - Seamlessly integrates with Bootstrap styling
• ♿ Accessibility First - ARIA-compliant components for inclusive applications
• 🚀 Performance Optimized - Efficient rendering and minimal overhead
• 🔧 Highly Customizable - Extensive API for tailoring components to your needs
• 📦 Zero JavaScript - Pure C# and Blazor implementation

✨ Features

• Framework Support: .NET 8 and .NET 9
• Generic Type Support: Works with string, int, Guid, enum, and custom types
• Form Integration: Full support for Blazor's EditForm and validation
• Event System: Rich event callbacks for component lifecycle
• Keyboard Navigation: Comprehensive keyboard support for accessibility
• Responsive Design: Mobile-friendly components that adapt to screen sizes
• Theming: Built on Bootstrap 5 for easy customization

📦 Installation

Install BlazorX via NuGet Package Manager:

.NET CLI

dotnet add package BlazorX.Components --version 1.1.46

Package Manager Console

Install-Package BlazorX.Components -Version 1.1.46

PackageReference

<PackageReference Include="BlazorX.Components" Version="1.1.46" />

🚀 Quick Start

1. Install the package (see Installation)

2. Add namespace to _Imports.razor:

@using BlazorX.Components

3. Start using components:

<Select  TValue="string" 
         Items="@items" 
         @bind-Value="@selectedValue" 
         Placeholder="Choose an option..." />

🧩 Components

Select

A feature-rich dropdown/select component with single and multi-selection support.

Features:

• ✅ Single & Multi-Selection
• ✅ Generic Type Support (string, int, Guid, enum, custom types)
• ✅ Search/Filter with configurable threshold
• ✅ Keyboard Navigation (Arrow keys, Enter, Escape, Home, End)
• ✅ Disabled States (component and individual options)
• ✅ Clear Button
• ✅ Rich Event System (OnOpening, OnOpened, OnClosing, OnClosed, OnClearing, OnCleared)
• ✅ Form Validation Support
• ✅ ARIA Accessibility
• ✅ Custom Styling Options

Example:

@using BlazorX.Components

<Select  TValue="string"
         Items="@countries"
         @bind-Value="@selectedCountry"
         Placeholder="Select a country..."
         AllowClear="true"
         MinimumResultsForSearch="0" />

@code {
    private string? selectedCountry;
    private List<SelectOption<string>> countries = new()
    {
        new() { Id = "us", Text = "United States" },
        new() { Id = "uk", Text = "United Kingdom" },
        new() { Id = "ca", Text = "Canada" }
    };
}

AutoComplete

Smart autocomplete input component with local and remote data support.

Features:

• ✅ Local Data Source Support
• ✅ Remote Data Source (API Integration)
• ✅ Debounced Search
• ✅ Minimum Character Threshold
• ✅ Keyboard Navigation
• ✅ Custom Result Templates
• ✅ Loading States

Example:

@using BlazorX.Components

<AutoComplete @bind-Value="searchText" 
               SelectList="searchOptions" 
               ExternalDataRequest="FetchData"
               Placeholder="Start typing..." />

@code {
    private string searchText = string.Empty;
    private List<string> searchOptions = new();

    async Task<List<string>> FetchData(string keyword)
    {
        // Fetch from API or local source
        return searchOptions
            .Where(x => x.Contains(keyword, StringComparison.OrdinalIgnoreCase))
            .ToList();
    }
}

PasswordMeter

Visual password strength indicator component.

Features:

• ✅ Real-time Strength Calculation
• ✅ Visual Feedback
• ✅ Customizable Strength Rules
• ✅ Color-coded Indicators
• ✅ Accessibility Support

Example:

@using BlazorX.Components

<PasswordMeter @bind-Value="password" />

@code {
    private string password = string.Empty;
}

Examples

Comprehensive examples are available in the Samples project.

API Reference

Full API documentation is available in XML documentation within the source code.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.

👨‍💻 Developer

Ahmed Aboelmagd

• LinkedIn: Ahmed Aboelmagd
• Website: BlazorX.com

🌟 Support

If you find this project useful, please consider:

• 🐛 Reporting bugs
• 💡 Suggesting new features
• 📖 Improving documentation

Built with ❤️ using Blazor and Bootstrap