Fundamentals
Components
Code Utilities
Demo
Development

Information

Basic information about the application.

Typography

Guidelines on using typography effectively.

Colors

Color schemes and usage guidelines.

Base Components

Fundamental components for building UI elements.

Form Components

Components used for creating forms.

Card Components

Components designed for card layouts.

Layout Components

Components for managing layout structure.

Utility Components

Utility components for various functions.

Media Components

Components for handling media content.

Charts

Blazor native Chart Components

DataSource

Data binding and source management component.

C# Code

Utilities and examples for C# programming.

JavaScript

Guidelines and tools for JavaScript development.

CSS Classes

Styling guidelines and utilities.

License

Information about the project's license.

Contact

How to get in touch with us.

Git Repository

Access the project's Git repository.

Contact

How to get in touch with us.

Donate

Support the development by donating.

BcComponentBase

Base class for BlazorCraft components.

BcInputComponentBase

Base class for input components.

BcLayoutComponentBase

Base class for layout components.

BcCard

Basic card layout component.

BcCardGroup

Group of card components.

BcActionCard

Card component with action elements.

BcComboCard

Card combining multiple features.

BcDateCard

Card component displaying dates.

BcDateTimeCard

Card displaying date and time.

BcEntryCard

Card for data entry.

BcExpandCard

Expandable card component.

BcExpandComboCard

Card combining multiple features.

BcRadioCard

Card with radio button options.

BcSpinCard

Card with spinner control.

BcSwitchCard

Card with switch toggle.

BcTimeCard

Card displaying time information.

BcButton

Button component for user interactions.

BcCheckbox

Checkbox input component.

BcDropDown

Dropdown list selection component.

BcFileDrop

Component for dragging and dropping files.

BcRadioButton

Radio button input component.

BcRange

Range slider input component.

BcValidation

Validation utilities for form inputs.

BcInputText

Text input field component.

BcInputNumber

Number input field component.

BcInputDate

Date input field component.

BcTextArea

Multi-line text input component.

BcTextEditor

Rich text editor component.

BcTimePicker

Component for selecting time.

BcDateTimePicker

Component for selecting date and time.

BcCalendarDatePicker

Date picker with calendar interface.

AutoGrid

Automatic grid layout component.

Grid

Grid layout component.

BreakpointListener

Component to detect responsive breakpoints.

Clamp

Component for clamping content.

ContentInjector

Inject content dynamically.

Flex

Flexible box layout component.

Not Found

Page not found component.

Section

Layout section component.

ThemeRenderer

Component for rendering themes.

BcImage

Image display component.

BcSvg

SVG rendering component.

BcImageCropper

Component for cropping images.

BcBanner

Banner display component.

BcBreadCrumb

Breadcrumb navigation trail component.

BcContextMenu

Context menu component.

BcDialog

Dialog/modal component.

BcDragProvider

Component providing drag-and-drop functionality.

BcVirtualDrag

Blazor native component with a “virtual” approach to drag-and-drop

BcExpander

Expandable content component.

BcProgressBar

Progress bar indicator component.

BcPopOver

Shows Content above the ChildContent

BcSidebarView

Sidebar navigation component.

BcSlider

Slide show component.

BcSpinner

Loading spinner component.

Topic.BcStepsPage.Title

Topic.BcStepsPage.Description

BcTabs

Tab navigation component.

BcToast

Toast notification component.

BcTooltip

Tooltip display component.

BcBarChart

Blazor native Bar Chart

BcBubbleChart

Blazor native Bubble Chart

BcGaugeChart

Blazor native Gauge Chart

BcLineChart

Blazor native line chart

Pie Chart

A pie chart with several segments in different colors.

BcAnimation

Animation utilities and components.

BcAnimationTimeLine

Timeline for managing animations.

BcBrowserFile

Upload files with Path and progress state.

BcCanvasBuilder

BcCanvasBuilder utilities and examples.

BcCssClassBuilder

Utility for building CSS class strings.

BcCssStyleBuilder

Utility for building CSS style strings.

BcCssColorMixer

Utility for mixing CSS colors.

BcCssGradientMixerPage

A tool for creating Blazor color gradients in C#

BcLocalizer

Localization utilities.

IBcBootstrapService

Start the services before the Web Application Builder runs the application.

BcJsBrowserLanguageService

Service for loading and setting the language for the Localizer.

BcJsCanvasService

Service for creating Canvas Images

BcJsClipBoardService

Service for clipboard operations.

BcJsCookieService

Service for handling cookies in JavaScript.

BcJsDomService

Service for DOM manipulations.

BcJsFileService

Service for file operations.

BcJsInputService

Service for registering input listeners.

BcJsLocalStorageService

Service for local storage operations.

BcJsMouseService

Service for mouse event handling.

BcJsSoundService

Service for playing sounds.

BcJsThemeService

Service for detecting browser theme settings.

BcJsTouchService

Service for handling touch input.

BcJsVibrateService

Service for triggering device vibrations.

Css BorderRadius Classes

Utilities for border radius styling.

Css Cursor Classes

Utilities for cursor styling.

Css Display Classes

CSS display property utilities.

Css Flex Classes

CSS flexbox utilities.

Css Grid Classes

CSS flexbox utilities.

Css FontSize Classes

Utilities for font sizes.

Css Margin Classes

Utilities for CSS margins.

Css Padding Classes

Utilities for CSS padding.

Css Scroll Classes

Utilities for scroll behavior.

Css Text Classes

Utilities for text styling.

Css Width Classes

Utilities for element widths.

Css Height Classes

Utilities for element heights.

BcDataTable

DataTable bound the the BcDatasource

BcInfiniteScroll

Unlimited Scroll through your BcDatasource

BcDataSourceSearchField

Topic.BcDataSourceSearchField.Description

BcVirtualDrag

Description

The BcVirtualDrag system provides a flexible drag-and-drop implementation for Blazor components without relying on HTML5 drag attributes. It uses manual position detection via DOM bounds and supports any CSS layout (flex, grid, flow). Components can be dragged between containers and drop validation is handled via DragGroup matching.

Container Properties

Configuration

BcDragConfiguration

Configuration object controlling drag behavior such as threshold, ghost opacity, and visibility.

ContainerId

string

Unique identifier for the container element in the DOM.

RenderWidth

string

BcVirtualDragPage.ContainerProperties.RenderWidth.Description

Height

string

Height of the container (CSS value, e.g., "auto" or "400px").

ChildContent

RenderFragment

The draggable components to render inside the container.

GhostTemplate

RenderFragment < BcDragContext >

Optional template for rendering a custom ghost/preview during drag operations.

Container Events

OnDragStarted

EventCallback < BcDragContext >

Triggered when a drag operation begins on any component in the container.

OnDragEnded

EventCallback < BcDragContext >

Triggered when a drag operation ends (drop, cancel, or release).

OnDropCompleted

EventCallback < BcDragContext >

Triggered when a successful drop occurs on a valid target.

Component Properties (BcDragComponent)

DragData

object?

Optional data payload attached to the draggable component for identification.

DragGroup

string

Group identifier for drag/drop compatibility. Components can only be dropped on targets with matching groups.

IsDraggable

bool

Whether this component can be dragged.

IsDropTarget

bool

Whether this component can accept drops from other components.

DrawIndex

int

Z-order for rendering and event handling. Higher values are on top.

Configuration Properties (DragConfiguration)

DragThreshold

double

Minimum distance in pixels the mouse must move before drag starts. Prevents accidental drags on click.

GhostOpacity

double

Opacity of the ghost element during drag (0.0 to 1.0).

ShowGhost

bool

Whether to show a ghost/preview at the cursor position during drag.

Sample

File Manager Example

Drag files to folders. Files with DragGroup="files" can only be dropped on folders with the same group. The "Secret.key" file has DragGroup="secure" and can only be dropped in the "Secure Vault".

Files
Document.pdf
Image.png
Data.xlsx
Notes.txt
Secret.key
Folders
Documents
Images
Archive
Secure Vault
Sortable

Here are some examples of sortable virtual drag lists.

To Do (3)
Design mockups
UI/UX design
Write tests
Unit tests for API
Code review
Review PR #234
In Progress (2)
API endpoint
User authentication
Database schema
Migration scripts
Done (1)
Project setup
Initial configuration

Event Log

No events yet. Try dragging items!