Tailgrape.BlazorComponents 3.0.92

?? Tailgrape Blazor Components

A comprehensive collection of professional, production-ready Blazor components designed for modern web applications. Built with .NET 10 and featuring beautiful UI designs, full accessibility support, and developer-friendly APIs.

? What's Inside

?? Data Display Components

• Modern Data Grid - Advanced table component with sorting, filtering, and pagination
• Charts - Bar, Line, Pie, Donut, Gauge, Radial Progress, and Target Bar charts
• Search Dropdown - Intelligent searchable dropdown with filtering

?? Form Components

• Phone Number - Professional phone input with 40+ country codes and dual output (phone + country)
• Date Picker - Timezone-aware date selection with validation
• Date Time Picker - Combined date and time selection
• Multi-Select - Multi-option selection component
• Toggle Switch - Boolean toggle component

?? Feedback Components

• Banner - Full-width system alerts and notifications (one at a time)
• Toast - Corner notifications for user feedback (multiple at once)

?? Rich Text Editor

• Summernote Editor - Feature-rich rich text editing experience

---

?? Quick Start

Installation

Install the NuGet package:

dotnet add package Tailgrape.BlazorComponents

Or via NuGet Package Manager:

Install-Package Tailgrape.BlazorComponents

Basic Setup

1. Add to Program.cs

using Tailgrape.BlazorComponents.Banner;

var builder = WebAssemblyBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient 
{ 
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) 
});

// Add Banner Service (for system alerts)
builder.Services.AddBannerService();

await builder.Build().RunAsync();

2. Add to _Imports.razor

@using Tailgrape.BlazorComponents.PhoneNumber
@using Tailgrape.BlazorComponents.DatePicker
@using Tailgrape.BlazorComponents.Banner
@using Tailgrape.BlazorComponents.Toast
@using Tailgrape.BlazorComponents.DataGrid
@using Tailgrape.BlazorComponents.Charts

3. Use in Your Components

@page "/contact"

<PhoneNumber @bind-Value="phone" 
            @bind-SelectedCountryName="country"
            Label="Contact Number" />

<DatePicker @bind-ValueUtc="birthDate" 
           Label="Date of Birth" />

<button @onclick="Submit">Submit</button>

@code {
    private string phone = string.Empty;
    private string country = string.Empty;
    private DateTime? birthDate;

    private async Task Submit()
    {
        await _api.SaveContact(new { phone, country, birthDate });
    }
}

---

?? Component Overview

1. Phone Number Component

Professional phone number input with integrated country selection.

Features:

• 40+ countries with phone codes
• Flexible dropdown positioning (left/right)
• Default country selection
• Lock country for single-country apps
• Two outputs: phone number + country name
• Input validation (minimum 7 digits)
• Dark mode support
• Fully accessible

Basic Usage:

<PhoneNumber @bind-Value="phone" 
            @bind-SelectedCountryName="country"
            Label="Phone Number"
            DefaultCountryCode="US" />

Output:

• phone: "+1-2025551234"
• country: "United States"

---

2. Date Picker Component

Timezone-aware date selection with validation and formatting.

Features:

• Timezone handling (UTC conversion)
• Min/max date validation
• Custom date format display
• Readonly mode
• Clear button
• Local timezone info display

Basic Usage:

<DatePicker @bind-ValueUtc="selectedDate" 
           Label="Select Date"
           Required="true" />

---

3. Date Time Picker Component

Combined date and time selection.

Features:

• Integrated date and time input
• Timezone support
• Min/max validation
• Format customization

Basic Usage:

<DateTimePicker @bind-ValueUtc="selectedDateTime" 
               Label="Select Date & Time" />

---

4. Modern Data Grid

Advanced table component for displaying and managing data.

Features:

• Sorting and filtering
• Pagination
• Responsive design
• Mobile-optimized
• Custom column rendering
• Row selection
• Keyboard navigation

Basic Usage:

<ModernDataGrid Items="@contacts" 
               TItem="Contact"
               Title="Contacts" />

---

5. Charts

Multiple chart types for data visualization.

Available Charts:

• Bar Chart
• Line Chart
• Pie Chart
• Donut Chart
• Gauge Chart
• Radial Progress Chart
• Target Bar Chart
• Statistics Card

Basic Usage:

<BarChart Title="Sales Data" 
         Labels="@months"
         Data="@salesData" />

---

6. Banner Service

Full-width system alerts for important notifications.

Features:

• One notification at a time
• Auto-close with configurable duration
• Close button
• Progress bar
• Multiple types (success, error, warning, info)
• Persistent mode (duration: 0)

Basic Usage:

@inject BannerService BannerService

private void ShowSuccess()
{
    BannerService.ShowSuccess("Operation completed!", "Success");
}

private void ShowError()
{
    BannerService.ShowError("Something went wrong", "Error", durationMs: 5000);
}

---

7. Toast Notifications

Corner notifications for user feedback.

Features:

• Multiple notifications at once
• Auto-close with configurable duration
• Different positions
• Multiple types
• Auto-queue management

Basic Usage:

@inject ToastService ToastService

private void ShowNotification()
{
    ToastService.ShowSuccess("Saved successfully!");
}

---

8. Search Dropdown

Intelligent searchable dropdown with filtering.

Features:

• Real-time search filtering
• Keyboard navigation
• Custom item rendering
• Multiple selection option
• Accessible design

Basic Usage:

<SearchDropdown @bind-SelectedValue="@selectedCountry"
               Items="@countries"
               Label="Select Country"
               Placeholder="Search countries..." />

---

9. Multi-Select

Multi-option selection component.

Features:

• Multiple item selection
• Search and filter
• Remove selected items
• Custom styling
• Keyboard navigation

Basic Usage:

<MultiSelect @bind-SelectedItems="@selectedUsers"
            Items="@allUsers"
            Label="Select Users"
            Placeholder="Choose users..." />

---

10. Toggle Switch

Boolean toggle component.

Features:

• Smooth animations
• Disabled state
• Label support
• Accessible

Basic Usage:

<ToggleSwitch @bind-Value="@isEnabled" 
             Label="Enable Feature" />

---

11. Summernote Editor

Rich text editing component.

Features:

• Full HTML editing
• Text formatting tools
• Link and image insertion
• Font and size selection
• Color picker
• Customizable toolbar

Basic Usage:

<SummernoteEditor @bind-Value="@htmlContent" 
                 Label="Description" />

---

?? Styling & Theming

All components include:

• Professional Design - Modern, clean UI
• Dark Mode Support - Automatic theme detection
• CSS Variables - Easy customization

Custom Theme Example

:root {
    /* Phone Number Component */
    --phone-primary-color: #667eea;
    --phone-primary-light: #764ba2;
    --phone-border-color: #e5e7eb;
    --phone-error-color: #ef4444;
    --phone-success-color: #10b981;

    /* Date Picker Component */
    --date-picker-primary: #667eea;
    --date-picker-border: #e5e7eb;
}

---

? Accessibility

All components are built with accessibility in mind:

• ? WCAG AA compliant
• ? Semantic HTML
• ? ARIA labels and descriptions
• ? Keyboard navigation support
• ? Screen reader friendly
• ? High contrast colors
• ? Focus state indicators

---

?? Responsive Design

All components are fully responsive:

• Desktop - Full-featured experience
• Tablet - Optimized layout and touch targets
• Mobile - Compact design with touch-friendly inputs

---

?? Dark Mode

Automatic dark mode support:

• Detects system preference
• Optimized colors for both themes
• Smooth transitions
• No additional configuration needed

---

?? Advanced Features

Form Integration

All components work seamlessly with Blazor EditForm:

<EditForm Model="@contact" OnValidSubmit="Save">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <PhoneNumber @bind-Value="contact.Phone" 
                @bind-SelectedCountryName="contact.Country"
                Label="Phone"
                Required="true" />

    <DatePicker @bind-ValueUtc="contact.Birthdate" 
               Label="Birth Date"
               Required="true" />

    <button type="submit">Save</button>
</EditForm>

Validation

Components support built-in validation:

• Phone Number: Minimum 7 digits
• Date Picker: Min/max date validation
• Custom Messages: Provide custom error messages

Service Injection

Some components work as services:

@inject BannerService BannerService
@inject ToastService ToastService

// Use in methods
BannerService.ShowSuccess("Done!");
ToastService.ShowInfo("Processing...");

---

?? Use Cases

Contact Form

<PhoneNumber @bind-Value="phone" 
            @bind-SelectedCountryName="country"
            Label="Contact Number"
            DefaultCountryCode="US"
            DisableCountrySelection="true" />

User Registration

<DatePicker @bind-ValueUtc="birthDate" 
           Label="Date of Birth"
           Required="true" />

<MultiSelect @bind-SelectedItems="@interests"
            Items="@availableInterests"
            Label="Your Interests" />

Dashboard

<BarChart Title="Monthly Sales" 
         Labels="@months"
         Data="@salesData" />

<ModernDataGrid Items="@transactions" 
               TItem="Transaction"
               Title="Recent Transactions" />

System Alerts

try 
{
    await _api.ProcessOrder(order);
    BannerService.ShowSuccess("Order processed successfully!");
}
catch (Exception ex)
{
    BannerService.ShowError(ex.Message, "Error");
}

---

?? Documentation

Each component includes:

• Quick Start Guide - Get running in minutes
• Comprehensive Documentation - All features explained
• Interactive Demo - See it in action
• Code Examples - Copy-paste ready examples

Visit component demo pages:

• /phone-number-demo
• /date-picker-demo
• /banner-demo
• /toast-demo
• And more...

---

??? Requirements

• .NET 10 or later
• Blazor WebAssembly or Blazor Server
• Modern browser with ES6 support

---

?? Performance

• Optimized Bundle Size - Minimal CSS and JS overhead
• Fast Rendering - Efficient component lifecycle
• Zero Dependencies - No external npm packages required
• Production Ready - Battle-tested in production apps

---

?? Browser Support

Browser	Support
Chrome/Edge	? Latest
Firefox	? Latest
Safari	? Latest
Mobile Browsers	? All modern

---

?? License

This package is free for business with less than 10 employees. See the LICENSE file for details and licensing terms for larger organizations.

---

?? Contributing

We welcome contributions! Please ensure:

• Components are accessible (WCAG AA)
• Code follows existing patterns
• Documentation is updated
• Examples are provided

---

?? Version History

Version 3.0.0 (Current)

• ? New Phone Number component with dual output
• ? Enhanced accessibility across all components
• ? Improved dark mode support
• ?? Performance optimizations
• ?? Comprehensive documentation

---

?? Tips & Best Practices

1. Always add labels - Improves accessibility
2. Use default values - Better user experience
3. Implement validation - Use Required parameter
4. Show feedback - Use Banner or Toast for notifications
5. Test on mobile - Components are responsive
6. Use dark mode - Works automatically

---

?? Getting Help

• ?? Check documentation in component folders
• ?? Visit demo pages in your application
• ?? Contact support: support@tailgrape.com
• ?? Report issues on GitHub

---

?? Support

Commercial Support Available

• Enterprise support for organizations with 10+ employees
• Priority bug fixes and feature requests
• Custom component development

Contact: support@tailgrape.com

---

?? Credits

Built with ?? by Tailgrape Technologies

---

?? Quick Links

• Complete HOW_TO_USE Guide
• License Information
• Component Documentation
• Changelog

---

Transform your Blazor applications with professional, accessible components. ???

---

Last Updated: December 2024 Latest Version: 3.0.0