Blaztrap.Controls 1.0.0-alpha.6

Blaztrap Controls

A comprehensive Blazor component library providing Bootstrap 5.3 styled controls with an attribute-driven CSS generation system for optimal performance.

Table of Contents

• Installation
• Getting Started
• Architecture Overview
• Base Control Class
• Component Catalog
  • Core Controls
  • Layout Components
  • Dialog Components
  • Form Controls
• Advanced Features
• Performance Optimization

Installation

NuGet Package Installation

# Install the core package
dotnet add package Blaztrap.Controls

# Install layout components
dotnet add package Blaztrap.Controls.Layout

# Install dialog components
dotnet add package Blaztrap.Controls.Dialogs

# Install form components
dotnet add package Blazor.Controls.Forms

# Optional: Install Bootstrap Icons integration
dotnet add package Blaztrap.Controls.Icons.BootstrapIcons

Configure Your Project

1. Add the following to your _Imports.razor:

@using Blaztrap.Controls

2. Include Bootstrap CSS in your index.html (Blazor WebAssembly) or _Host.cshtml (Blazor Server):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

3. Add Blaztrap styles and scripts:

<link href="_content/Blaztrap.Controls/blaztrap.css" rel="stylesheet" />
<script src="_content/Blaztrap.Controls/blaztrap.js"></script>

Getting Started

Basic Usage Example

@page "/example"

<Container>
    <Row>
        <Column Size="ColumnSize.Six">
            <Button Style="ButtonStyle.Primary" OnClick="HandleClick">
                Click Me
            </Button>
        </Column>
        <Column Size="ColumnSize.Six">
            <Alert Style="AlertStyle.Success" IsDismissible="true">
                Welcome to Blaztrap Controls!
            </Alert>
        </Column>
    </Row>
</Container>

@code {
    private void HandleClick()
    {
        // Handle button click
    }
}

Architecture Overview

Blaztrap Controls uses an attribute-driven CSS generation system that provides:

• Automatic CSS class generation based on component properties
• Performance optimization through property caching and compiled expressions
• Type-safe Bootstrap integration with enums for all Bootstrap options
• Modular architecture with separate packages for different component categories

Component Hierarchy

Control (Base)
├── AsyncControl
│   ├── InteroperableControl
│   │   └── HideableControl
│   │       └── DialogsControl
│   └── Various async components
└── Synchronous components

Base Control Class

The Control class is the foundation of all Blaztrap components. It provides a rich set of utility properties for Bootstrap styling.

Core Parameters

Parameter	Type	Description	Example
Id	string?	HTML id attribute	Id="myButton"
Class	string?	Additional CSS classes	Class="custom-class"
Style	string?	Inline CSS styles	Style="width: 100px;"
Display	Display	Bootstrap display utility	Display="Display.None"
Position	Position	Bootstrap position utility	Position="Position.Relative"
InputAttributes	Dictionary<string, object>?	Capture unmatched attributes	Spreads additional HTML attributes

Spacing Parameters

All spacing parameters support responsive breakpoints and accept HashSet<T> for multiple values.

Parameter	Type	Description	Example
Margin	HashSet<Margin>?	Bootstrap margin utilities	Margin="[Margin.All3, Margin.TopMd5]"
Padding	HashSet<Padding>?	Bootstrap padding utilities	Padding="[Padding.X2, Padding.Y3]"

Color Parameters

Parameter	Type	Description	Example
TextColor	TextColor	Text color utility	TextColor="TextColor.Primary"
BackgroundColor	BackgroundColor	Background color utility	BackgroundColor="BackgroundColor.Light"
BorderColor	BorderColor	Border color utility	BorderColor="BorderColor.Primary"

Border Parameters

Parameter	Type	Description	Example
Border	HashSet<Border>?	Border sides	Border="[Border.All, Border.Top]"
BorderWidth	BorderWidth	Border width	BorderWidth="BorderWidth.Two"
BorderRadius	BorderRadius	Border radius sides	BorderRadius="BorderRadius.All"
BorderRadiusSize	BorderRadiusSize	Border radius size	BorderRadiusSize="BorderRadiusSize.Large"

Typography Parameters

Parameter	Type	Description	Example
FontSize	FontSize	Font size utility	FontSize="FontSize.H3"
FontStyle	FontStyle	Font style (italic/normal)	FontStyle="FontStyle.Italic"
FontWeight	FontWeight	Font weight	FontWeight="FontWeight.Bold"
LineHeight	LineHeight	Line height utility	LineHeight="LineHeight.Base"
TextAlign	HashSet<TextAlign>?	Text alignment	TextAlign="[TextAlign.Center]"
TextDecoration	TextDecoration	Text decoration	TextDecoration="TextDecoration.Underline"
TextTransform	TextTransform	Text transformation	TextTransform="TextTransform.Uppercase"
TextWrap	TextWrap	Text wrapping behavior	TextWrap="TextWrap.NoWrap"

Flexbox Parameters

Parameter	Type	Description	Example
Flex	HashSet<Flex>?	Flex container properties	Flex="[Flex.Row, Flex.WrapReverse]"
JustifyContent	HashSet<JustifyContent>?	Main axis alignment	JustifyContent="[JustifyContent.Center]"
AlignItems	HashSet<AlignItems>?	Cross axis alignment	AlignItems="[AlignItems.Center]"
AlignContent	HashSet<AlignContent>?	Multi-line alignment	AlignContent="[AlignContent.Around]"
AlignSelf	HashSet<AlignSelf>?	Individual item alignment	AlignSelf="[AlignSelf.End]"
FlexGrow	HashSet<FlexGrow>?	Flex grow factor	FlexGrow="[FlexGrow.One]"
FlexShrink	HashSet<FlexShrink>?	Flex shrink factor	FlexShrink="[FlexShrink.Zero]"
FlexFill	HashSet<FlexFill>?	Flex fill behavior	FlexFill="[FlexFill.Fill]"
Order	HashSet<Order>?	Flex item order	Order="[Order.First]"

Sizing Parameters

Parameter	Type	Description	Example
Width	HashSet<Width>?	Width utilities	Width="[Width.W100]"
Height	HashSet<Height>?	Height utilities	Height="[Height.H50]"
MinViewportWidth	MinViewportWidth	Min viewport width	MinViewportWidth="MinViewportWidth.Vw100"
MinViewportHeight	MinViewportHeight	Min viewport height	MinViewportHeight="MinViewportHeight.Vh100"
ViewportWidth	ViewportWidth	Viewport width	ViewportWidth="ViewportWidth.Vw50"
ViewportHeight	ViewportHeight	Viewport height	ViewportHeight="ViewportHeight.Vh75"

Other Utility Parameters

Parameter	Type	Description	Example
Shadow	Shadow	Box shadow utility	Shadow="Shadow.Large"
Overflow	Overflow	Overflow behavior	Overflow="Overflow.Hidden"
OverflowX	OverflowX	Horizontal overflow	OverflowX="OverflowX.Auto"
OverflowY	OverflowY	Vertical overflow	OverflowY="OverflowY.Scroll"
VerticalAlign	VerticalAlign	Vertical alignment	VerticalAlign="VerticalAlign.Middle"
Float	HashSet<Float>?	Float utilities	Float="[Float.Start]"
Opacity	Opacity	Opacity level	Opacity="Opacity.Fifty"
Gap	HashSet<Gap>?	Gap utilities	Gap="[Gap.Three]"
RowGap	HashSet<RowGap>?	Row gap utilities	RowGap="[RowGap.Two]"
ColumnGap	HashSet<ColumnGap>?	Column gap utilities	ColumnGap="[ColumnGap.Four]"

Component Catalog

Core Controls

Components in the Blaztrap.Controls package:

• Alert - Contextual feedback messages
• Badge - Small count and labeling component
• Box - Flexible container with utilities
• Breadcrumb - Navigation hierarchy indicator
• Button - Interactive button with extensive styling
• ButtonGroup - Groups multiple buttons together
• ButtonToolbar - Combines button groups into toolbars
• CloseButton - Generic close button for dismissing content
• ColorToggler - Theme color switcher component
• Dropdown - Toggleable contextual overlays
• Icon - Icon display component
• Label - Form labels with styling options
• ListGroup - Flexible list of items
• Nav - Navigation components (tabs, pills, etc.)
• Pagination - Pagination navigation
• Placeholder - Loading placeholders
• Popover - Pop-up information boxes
• Progress - Progress bars and indicators
• Spinner - Loading spinners
• Table - Powerful data table component
• TableContainer - Responsive table wrapper
• Tooltip - Contextual tooltips

Layout Components

Components in the Blaztrap.Controls.Layout package:

• Accordion - Vertically collapsing accordions
• Card - Flexible content container
• Column - Bootstrap grid column
• Container - Bootstrap container
• FlexBox - Flexible box layout component
• Navbar - Responsive navigation header
• Row - Bootstrap grid row
• Tabs - Tabbed interface component

Dialog Components

Components in the Blaztrap.Controls.Dialogs package:

• Modal - Modal dialog windows
• Offcanvas - Hidden sidebars
• Toast - Lightweight notifications

Form Controls

Components in the Blazor.Controls.Forms package:

• Check - Checkboxes and switches
• FloatingLabel - Floating form labels
• FormControl - Text inputs and textareas
• InputGroup - Extended form controls
• Radio - Radio button groups
• Range - Range slider inputs
• Select - Dropdown selection inputs

Quick Examples

Basic Layout

<Container>
    <Row>
        <Column Sm="6">
            <Card>
                <CardHeader>Featured</CardHeader>
                <CardBody>
                    <CardTitle>Special title treatment</CardTitle>
                    <CardText>With supporting text below.</CardText>
                    <Button Style="ButtonStyle.Primary">Go somewhere</Button>
                </CardBody>
            </Card>
        </Column>
        <Column Sm="6">
            <Alert Style="AlertStyle.Success" Dismissible="true">
                <AlertHeading>Well done!</AlertHeading>
                You successfully read this important alert message.
            </Alert>
        </Column>
    </Row>
</Container>

Form Example

<form>
    <FloatingLabel class="mb-3">
        <FormControl Type="FormControlType.Email" Id="email" Placeholder="name@example.com" @bind-Value="email" />
        <label for="email">Email address</label>
    </FloatingLabel>
    
    <FloatingLabel class="mb-3">
        <FormControl Type="FormControlType.Password" Id="password" Placeholder="Password" @bind-Value="password" />
        <label for="password">Password</label>
    </FloatingLabel>
    
    <Check @bind-Value="rememberMe" Label="Remember me" class="mb-3" />
    
    <Button Style="ButtonStyle.Primary" Type="ButtonType.Submit" class="w-100">
        Sign in
    </Button>
</form>

@code {
    private string email = "";
    private string password = "";
    private bool rememberMe = false;
}

Modal Dialog

<Button Style="ButtonStyle.Primary" @onclick="() => modal.Show()">
    Launch demo modal
</Button>

<Modal @ref="modal">
    <ModalHeader>
        <ModalTitle>Modal title</ModalTitle>
    </ModalHeader>
    <ModalBody>
        Modal body text goes here.
    </ModalBody>
    <ModalFooter>
        <Button Style="ButtonStyle.Secondary" @onclick="() => modal.Hide()">Close</Button>
        <Button Style="ButtonStyle.Primary">Save changes</Button>
    </ModalFooter>
</Modal>

@code {
    private Modal modal;
}

Badge

Small count and labeling component.

<Badge Style="BadgeStyle.Primary" IsPill="true">
    New
</Badge>

Parameters:

• Style (BadgeStyle): Visual style
• IsPill (bool): Rounded pill appearance

Breadcrumb

Navigation hierarchy indicator.

<Breadcrumb>
    <BreadcrumbItem Href="/">Home</BreadcrumbItem>
    <BreadcrumbItem Href="/products">Products</BreadcrumbItem>
    <BreadcrumbItem Active="true">Current Page</BreadcrumbItem>
</Breadcrumb>

Parameters:

• Divider (string?): Custom divider character
• Items (RenderFragment): Breadcrumb items

Button

Interactive button component with extensive styling options.

<Button Style="ButtonStyle.Primary" 
        Size="ButtonSize.Large" 
        IsOutline="true"
        OnClick="HandleClick">
    Click Me
</Button>

Parameters:

• Style (ButtonStyle): Visual style
• Size (ButtonSize): Button size (Small, Default, Large)
• IsOutline (bool): Outline variant
• Active (bool): Active state
• Disabled (bool): Disabled state
• Block (bool): Full-width block button
• Tag (ButtonTag): HTML tag type (Button, Submit, Reset, Link)
• OnClick (EventCallback<MouseEventArgs>): Click handler

ButtonGroup

Groups multiple buttons together.

<ButtonGroup IsVertical="false" Size="ButtonSize.Small">
    <Button Style="ButtonStyle.Secondary">Left</Button>
    <Button Style="ButtonStyle.Secondary">Middle</Button>
    <Button Style="ButtonStyle.Secondary">Right</Button>
</ButtonGroup>

Parameters:

• IsVertical (bool): Vertical orientation
• Size (ButtonSize): Size for all buttons
• Role (string?): ARIA role

CloseButton

Standard close button for dismissible components.

<CloseButton OnClick="HandleClose" Disabled="false" />

Parameters:

• Disabled (bool): Disabled state
• OnClick (EventCallback): Click handler
• AriaLabel (string?): Accessibility label

Collapse

Toggles visibility of content.

<Button @onclick="() => isOpen = !isOpen">Toggle</Button>
<Collapse IsOpen="@isOpen" Horizontal="false">
    <Card>
        Collapsible content here
    </Card>
</Collapse>

@code {
    private bool isOpen = false;
}

Parameters:

• IsOpen (bool): Visibility state
• Horizontal (bool): Horizontal collapse animation

Dropdown

Toggleable contextual overlay for displaying lists.

<Dropdown TValue="string" @bind-Value="selectedValue" Style="ButtonStyle.Primary">
    <Placeholder>Select an option</Placeholder>
    <Items>
        <DropdownItem Value="option1">Option 1</DropdownItem>
        <DropdownItem Value="option2">Option 2</DropdownItem>
        <DropdownDivider />
        <DropdownItem Value="option3">Option 3</DropdownItem>
    </Items>
</Dropdown>

@code {
    private string selectedValue = "option1";
}

Parameters:

• TValue: Type of the selected value
• Value (TValue?): Selected value
• ValueChanged (EventCallback<TValue?>): Value change handler
• Style (ButtonStyle): Button style
• MenuAlignment (DropdownMenuAlignment): Menu alignment
• CloseOnSelect (bool): Auto-close on selection
• Split (bool): Split button variant

ListGroup

Flexible component for displaying lists.

<ListGroup>
    <ListGroupItem Active="true">Active item</ListGroupItem>
    <ListGroupItem Disabled="true">Disabled item</ListGroupItem>
    <ListGroupItem Action="true" Href="#">Link item</ListGroupItem>
</ListGroup>

Parameters:

• Flush (bool): Remove borders
• Numbered (bool): Numbered list
• Horizontal (bool): Horizontal layout

Nav

Navigation component with tabs or pills styling.

<Nav Style="NavStyle.Tabs" Fill="true">
    <NavItem>
        <NavLink Active="true" Href="#home">Home</NavLink>
    </NavItem>
    <NavItem>
        <NavLink Href="#profile">Profile</NavLink>
    </NavItem>
    <NavItem>
        <NavLink Disabled="true" Href="#contact">Contact</NavLink>
    </NavItem>
</Nav>

Parameters:

• Style (NavStyle): Visual style (Tabs, Pills, Underline)
• Fill (bool): Fill available width
• Justified (bool): Equal width items
• Vertical (bool): Vertical orientation

Pagination

Page navigation component.

<Pagination CurrentPage="@currentPage" 
            TotalPages="10" 
            OnPageChanged="HandlePageChange"
            Size="PaginationSize.Large">
</Pagination>

@code {
    private int currentPage = 1;
    
    private void HandlePageChange(int page)
    {
        currentPage = page;
    }
}

Parameters:

• CurrentPage (int): Current page number
• TotalPages (int): Total number of pages
• OnPageChanged (EventCallback<int>): Page change handler
• Size (PaginationSize): Component size
• ShowFirstLast (bool): Show first/last buttons
• ShowPreviousNext (bool): Show prev/next buttons

Progress

Progress indicator with multiple bars support.

<Progress>
    <ProgressBar Value="25" Style="ProgressBarStyle.Success" />
    <ProgressBar Value="35" Style="ProgressBarStyle.Warning" Striped="true" />
    <ProgressBar Value="20" Style="ProgressBarStyle.Danger" Animated="true" />
</Progress>

Parameters:

• Height (int?): Custom height in pixels

ProgressBar

Individual progress bar component.

<ProgressBar Value="75" 
             Min="0" 
             Max="100"
             Style="ProgressBarStyle.Info"
             Striped="true"
             Animated="true"
             ShowLabel="true">
    75% Complete
</ProgressBar>

Parameters:

• Value (double): Current value
• Min (double): Minimum value
• Max (double): Maximum value
• Style (ProgressBarStyle): Visual style
• Striped (bool): Striped appearance
• Animated (bool): Animated stripes
• ShowLabel (bool): Display percentage

Spinner

Loading indicator.

<Spinner Type="SpinnerType.Border" 
         Style="SpinnerStyle.Primary"
         Size="SpinnerSize.Small">
    Loading...
</Spinner>

Parameters:

• Type (SpinnerType): Animation type (Border, Grow)
• Style (SpinnerStyle): Visual style
• Size (SpinnerSize): Component size

Table

Data table with extensive features including row selection and auto-sizing columns.

Basic Table:

<Table TItem="Person" 
       Items="@people"
       Striped="true"
       Hover="true"
       Size="TableSize.Small"
       Responsive="TableResponsive.Always">
    <TableColumn Header="Name" Field="@(p => p.Name)" />
    <TableColumn Header="Age" Field="@(p => p.Age)" />
    <TableColumn Header="Email" Field="@(p => p.Email)" />
</Table>

Table with Row Selection:

<Table TItem="Person" 
       Items="@people"
       SelectionMode="SelectionMode.Single"
       SelectedItems="@selectedPeople"
       SelectedItemsChanged="@OnSelectionChanged">
    <TableColumn Header="Name" Field="@(p => p.Name)" />
    <TableColumn Header="Age" Field="@(p => p.Age)" />
</Table>

@code {
    private List<Person> people = new();
    private HashSet<Person> selectedPeople = new();
    
    private async Task OnSelectionChanged(HashSet<Person> selected)
    {
        selectedPeople = selected;
        // Handle selection change
    }
}

Table with Auto-Sizing Columns:

<Table TItem="Person" Items="@people">
    <TableColumn Header="ID" Field="@(p => p.Id)" 
                 AutoSize="true" MinWidth="50" MaxWidth="100" />
    <TableColumn Header="Name" Field="@(p => p.Name)" 
                 AutoSize="true" MinWidth="150" />
    <TableColumn Header="Email" Field="@(p => p.Email)" 
                 AutoSize="true" MaxWidth="300" />
</Table>

Features:

• Row selection (None, Single, Multiple modes)
• Auto-sizing columns with min/max width constraints
• Pagination support
• Custom templates for headers, cells, and footers
• All Bootstrap table styles
• Responsive variations

Parameters:

• TItem: Type of data items
• Items (IEnumerable<TItem>?): Data source
• Style (TableStyle): Visual style
• Size (TableSize): Table size
• Striped (bool): Striped rows
• StripedColumns (bool): Striped columns
• Hover (bool): Hover effect
• Bordered (bool): Table borders
• Borderless (bool): No borders
• Responsive (TableResponsive): Responsive behavior
• ShowPagination (bool): Enable pagination
• PageSize (int): Items per page
• OnRowClick (EventCallback<TItem>): Row click handler

Layout Components

Container

Bootstrap container for responsive layout.

<Container Type="ContainerType.Fluid">
    
</Container>

Parameters:

• Type (ContainerType): Container type (Default, Sm, Md, Lg, Xl, Xxl, Fluid)

Row

Grid system row.

<Row RowCols="3" Gutters="Gutters.Three">
    <Column>Column 1</Column>
    <Column>Column 2</Column>
    <Column>Column 3</Column>
</Row>

Parameters:

• RowCols (int?): Number of columns per row
• Gutters (Gutters): Gutter spacing

Column

Grid system column.

<Column Size="ColumnSize.Six" 
        SizeMd="ColumnSize.Four"
        SizeLg="ColumnSize.Three"
        Offset="ColumnOffset.One">
    Content
</Column>

Parameters:

• Size (ColumnSize): Column width (1-12, Auto)
• SizeSm/Md/Lg/Xl/Xxl (ColumnSize): Responsive widths
• Offset (ColumnOffset): Column offset
• OffsetSm/Md/Lg/Xl/Xxl (ColumnOffset): Responsive offsets
• Order (ColumnOrder): Column order
• OrderSm/Md/Lg/Xl/Xxl (ColumnOrder): Responsive ordering

FlexBox

Flexible box layout component.

<FlexBox Direction="FlexDirection.Row"
         JustifyContent="[JustifyContent.Between]"
         AlignItems="[AlignItems.Center]"
         Gap="[Gap.Three]">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</FlexBox>

Parameters:

• Direction (FlexDirection): Flex direction
• Wrap (FlexWrap): Wrap behavior
• JustifyContent (HashSet<JustifyContent>?): Main axis alignment
• AlignItems (HashSet<AlignItems>?): Cross axis alignment
• Gap (HashSet<Gap>?): Gap between items

Card

Flexible content container.

<Card Style="CardStyle.Primary">
    <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardSubtitle>Card Subtitle</CardSubtitle>
    </CardHeader>
    <CardImg Src="image.jpg" Alt="Image" Position="CardImgPosition.Top" />
    <CardBody>
        <CardText>Card content goes here.</CardText>
        <Button Style="ButtonStyle.Primary">Action</Button>
    </CardBody>
    <CardFooter>
        Footer content
    </CardFooter>
</Card>

Parameters:

• Style (CardStyle): Visual style
• TextAlign (HashSet<TextAlign>?): Text alignment

Accordion

Collapsible content panels.

<Accordion AlwaysOpen="false" Flush="false">
    <AccordionItem>
        <AccordionHeader>
            <AccordionButton>Item #1</AccordionButton>
        </AccordionHeader>
        <AccordionCollapse>
            <AccordionBody>
                Content for item 1
            </AccordionBody>
        </AccordionCollapse>
    </AccordionItem>
    <AccordionItem>
        <AccordionHeader>
            <AccordionButton>Item #2</AccordionButton>
        </AccordionHeader>
        <AccordionCollapse>
            <AccordionBody>
                Content for item 2
            </AccordionBody>
        </AccordionCollapse>
    </AccordionItem>
</Accordion>

Parameters:

• AlwaysOpen (bool): Multiple items can be open
• Flush (bool): Remove borders and background

Tabs

Tabbed interface component.

<Tabs>
    <Tab Title="Home" Active="true">
        Home content
    </Tab>
    <Tab Title="Profile">
        Profile content
    </Tab>
    <Tab Title="Contact" Disabled="true">
        Contact content
    </Tab>
</Tabs>

Parameters:

• Style (TabStyle): Visual style (Tabs, Pills)
• Fill (bool): Fill available width
• Justified (bool): Equal width tabs

Dialog Components

Modal

Modal dialog overlay.

<Button @onclick="() => modal.Open()">Open Modal</Button>

<Modal @ref="modal" 
       Title="Modal Title"
       Size="ModalSize.Large"
       Centered="true"
       Scrollable="true"
       Backdrop="Backdrop.Static">
    <Body>
        Modal body content
    </Body>
    <Footer>
        <Button Style="ButtonStyle.Secondary" @onclick="() => modal.Close()">
            Close
        </Button>
        <Button Style="ButtonStyle.Primary">
            Save Changes
        </Button>
    </Footer>
</Modal>

@code {
    private Modal modal = default!;
}

Parameters:

• Title (string?): Modal title
• Size (ModalSize): Modal size (Small, Default, Large, ExtraLarge)
• Fullscreen (ModalFullscreen): Fullscreen mode
• Centered (bool): Vertically centered
• Scrollable (bool): Scrollable body
• Fade (bool): Fade animation
• Backdrop (Backdrop): Backdrop behavior (Default, Static, None)
• Keyboard (bool): Close on ESC key
• Focus (bool): Auto-focus modal
• OnOpening/OnOpened/OnClosing/OnClosed (Func<Task>?): Lifecycle events

Offcanvas

Off-canvas sidebar overlay.

<Button @onclick="() => offcanvas.Open()">Open Offcanvas</Button>

<Offcanvas @ref="offcanvas"
           Title="Offcanvas Title"
           Placement="OffcanvasPlacement.End"
           Backdrop="true"
           Scroll="false">
    <Body>
        Offcanvas content
    </Body>
</Offcanvas>

@code {
    private Offcanvas offcanvas = default!;
}

Parameters:

• Title (string?): Offcanvas title
• Placement (OffcanvasPlacement): Position (Start, End, Top, Bottom)
• Backdrop (bool): Show backdrop
• Scroll (bool): Allow body scrolling
• Keyboard (bool): Close on ESC key

Toast

Toast notification component.

<ToastContainer Position="ToastPosition.TopEnd">
    <Toast Title="Notification" 
           Subtitle="just now"
           Autohide="true"
           Delay="5000">
        Toast message content
    </Toast>
</ToastContainer>

Parameters:

• Title (string?): Toast title
• Subtitle (string?): Toast subtitle
• Autohide (bool): Auto-hide after delay
• Delay (int): Delay in milliseconds
• ShowCloseButton (bool): Show close button

Form Controls

Select

Dropdown selection control.

<Select TValue="string" @bind-Value="selectedValue" Size="SelectSize.Large">
    <SelectOption Value="">Choose...</SelectOption>
    <SelectOption Value="1">Option 1</SelectOption>
    <SelectOption Value="2">Option 2</SelectOption>
    <SelectOption Value="3">Option 3</SelectOption>
</Select>

@code {
    private string selectedValue = "";
}

Parameters:

• TValue: Type of the selected value
• Value (TValue?): Selected value
• Size (SelectSize): Control size
• Multiple (bool): Allow multiple selections
• Disabled (bool): Disabled state

Check

Checkbox and switch control.

<Check TValue="bool" 
       @bind-Value="isChecked"
       Style="CheckStyle.Switch"
       Inline="true">
    Enable notifications
</Check>

@code {
    private bool isChecked = false;
}

Parameters:

• TValue: Type of the value
• Value (TValue?): Checked state
• Style (CheckStyle): Visual style (Default, Switch)
• Inline (bool): Inline layout
• Disabled (bool): Disabled state
• Reverse (bool): Reverse label position

Radio

Radio button control.

<RadioGroup TValue="string" @bind-Value="selectedOption">
    <Radio Value="option1">Option 1</Radio>
    <Radio Value="option2">Option 2</Radio>
    <Radio Value="option3">Option 3</Radio>
</RadioGroup>

@code {
    private string selectedOption = "option1";
}

Parameters:

• TValue: Type of the value
• Value (TValue?): Selected value
• Name (string): Radio group name
• Inline (bool): Inline layout
• Disabled (bool): Disabled state

Range

Range slider control.

<Range TValue="int" 
       @bind-Value="rangeValue"
       Min="0"
       Max="100"
       Step="5">
    Volume: @rangeValue%
</Range>

@code {
    private int rangeValue = 50;
}

Parameters:

• TValue: Numeric type
• Value (TValue?): Current value
• Min (TValue?): Minimum value
• Max (TValue?): Maximum value
• Step (TValue?): Step increment
• Disabled (bool): Disabled state

Input

Text input control.

<Input TValue="string" 
       @bind-Value="textValue"
       Type="InputType.Email"
       Size="InputSize.Large"
       Placeholder="Enter email">
</Input>

@code {
    private string textValue = "";
}

Parameters:

• TValue: Type of the value
• Value (TValue?): Input value
• Type (InputType): Input type (Text, Email, Password, etc.)
• Size (InputSize): Control size
• Readonly (bool): Read-only state
• Disabled (bool): Disabled state
• Placeholder (string?): Placeholder text

InputGroup

Groups input with addons.

<InputGroup Size="InputGroupSize.Large">
    <InputGroupText>@</InputGroupText>
    <Input TValue="string" @bind-Value="username" Placeholder="Username" />
    <Button Style="ButtonStyle.Primary">Submit</Button>
</InputGroup>

@code {
    private string username = "";
}

Parameters:

• Size (InputGroupSize): Group size
• HasValidation (bool): Validation styling

Advanced Features

JavaScript Interoperability

Components that require JavaScript interaction extend InteroperableControl:

public partial class MyComponent : InteroperableControl
{
    protected override string? JsModulePath => "./_content/MyPackage/MyComponent.js";
    
    protected override async Task InitializeJsInterop()
    {
        await ImportJSReference("MyComponent", "MyPackage");
        // Initialize JavaScript module
    }
}

Custom Attribute Generation

Use the attribute system for custom CSS classes:

public enum MyStyle
{
    [BsClass("my-default")]
    Default = 0,
    [BsClass("my-custom")]
    Custom = 1
}

[BsClass("my-component")]
public partial class MyComponent : Control
{
    [Parameter]
    [BsInclude]
    public MyStyle Style { get; set; }
    
    [Parameter]
    [BsInclude]
    [BsClass("active")]
    public bool IsActive { get; set; }
    
    [Parameter]
    [BsInclude]
    [BsAttribute("data-custom")]
    public string? CustomData { get; set; }
}

Responsive Utilities

Most spacing and layout properties support responsive breakpoints:

<Box Margin="[Margin.All2, Margin.TopMd4, Margin.StartLg5]"
     Padding="[Padding.All3, Padding.XMd4]"
     Display="Display.None"
     DisplayMd="Display.Block">
    Responsive content
</Box>

Performance Optimization

Blaztrap Controls implements several performance optimizations:

1. Opt-in Attribute System

Properties are marked with [BsInclude] to participate in CSS generation:

[Parameter]
[BsInclude]  // Only included properties are processed
public ButtonStyle Style { get; set; }

2. Property Caching

Component metadata is cached using ConcurrentDictionary:

• First render: ~5-10ms to build cache
• Subsequent renders: <0.1ms property access

3. Compiled Expressions

Property getters are compiled to delegates for 10-100x faster access than reflection.

4. Efficient CSS Generation

• CSS classes are built once per render
• HashSet-based deduplication
• StringBuilder for string concatenation

Performance Metrics

Component	Properties	First Render	Subsequent Renders
Button	8	~2ms	<0.1ms
Table	15	~5ms	<0.2ms
Modal	12	~4ms	<0.15ms
Control Base	45	~10ms	<0.3ms

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Support

For issues, feature requests, or questions:

• GitHub Issues: https://github.com/your-org/blaztrap-controls/issues
• Documentation: https://your-docs-site.com

Version History

See CHANGELOG.md for release notes and version history.