Components Overview

MudBlazor.Extensions provides a comprehensive set of components that extend and enhance the MudBlazor component library. These components are designed to simplify common tasks and provide advanced functionality out of the box.

Component Categories

Data Editing Components

• MudExObjectEdit

  Automatically generate UI for object editing with built-in validation support. Supports DataAnnotations and Fluent validation.

• MudExStructuredDataEditor

  Edit structured data like JSON, XML, or YAML with automatic UI generation and validation.

File Management Components

• MudExFileDisplay

  Display various file types with automatic format detection and preview capabilities.

• MudExUploadEdit

  Advanced file upload with drag & drop, cloud integration, and extensive customization options.

Navigation Components

• MudExTreeView

  Enhanced tree view with breadcrumb navigation, search, and advanced selection modes.

• MudExTreeViewBreadcrumb

  Breadcrumb navigation component for tree structures.

Picker Components

• MudExColorPicker

  Enhanced color picker with various formats and presets.

• MudExIconPicker

  Icon selection from MudBlazor icons library with search.

• MudExFontSelect

  Font selection with preview and Google Fonts integration.

• MudExEnumSelect

  Automatic enum selection with display name support.

Layout Components

• MudExGrid

  Advanced grid with drag-drop, sorting, and filtering.

• MudExDockLayout

  Flexible dock layout with resizable, dockable panels.

• MudExSplitPanel

  Split panel for creating resizable divided areas.

Display and Media Components

• MudExImageViewer

  Advanced image viewer with zoom, pan, and rotation.

• MudExCodeView

  Code display with syntax highlighting.

• MudExMarkdown

  Render GitHub-flavored markdown content.

• MudExGravatarCard

  User card with Gravatar integration.

Form and Input Components

• MudExTextField

  Enhanced text field with advanced validation.

• MudExSelect

  Enhanced select with search and grouping.

• MudExChipSelect

  Chip-based multiple selection component.

• MudExColorEdit

  Color editing with visual picker integration.

Utility Components

• MudExAppLoader

  Application loading indicator with customizable appearance and behavior.

• MudExSvg

  SVG component for rendering and manipulating SVG graphics.

• Other Components

  Additional utility components like lists, cards, and more.

All Components List

Component	Description	Documentation
MudExObjectEdit	Auto-generate forms from objects	Object Edit
MudExStructuredDataEditor	Edit JSON/XML/YAML data	Structured Data
MudExFileDisplay	Display file contents	File Display
MudExUploadEdit	Advanced file upload	Upload Edit
MudExTreeView	Enhanced tree view	Tree View
MudExColorPicker	Color selection picker	Pickers
MudExIconPicker	Icon selection picker	Pickers
MudExFontSelect	Font selection	Pickers
MudExEnumSelect	Enum selection	Pickers
MudExGrid	Advanced data grid	Grid & Layout
MudExDockLayout	Dockable layout system	Grid & Layout
MudExSplitPanel	Split panel layout	Grid & Layout
MudExImageViewer	Image viewer with zoom	Display & Media
MudExCodeView	Code syntax highlighting	Display & Media
MudExMarkdown	Markdown renderer	Display & Media
MudExGravatarCard	User card with Gravatar	Display & Media
MudExTextField	Enhanced text field	Form Inputs
MudExSelect	Enhanced select	Form Inputs
MudExChipSelect	Chip-based selection	Form Inputs
MudExHtmlEdit	HTML editor	Form Inputs
MudExList	Enhanced list	Other
MudExCardList	Card-based list	Other
MudExPopover	Popover component	Other
MudExAppLoader	Application loader	App Loader
MudExSvg	SVG graphics	SVG

Quick Start

To use any component, first ensure you have the proper imports in your _Imports.razor:

@using MudBlazor.Extensions
@using MudBlazor.Extensions.Components
@using MudBlazor.Extensions.Components.ObjectEdit

Then simply add the component to your page:

<MudExObjectEditForm Value="@myModel" OnValidSubmit="@HandleSubmit" />

Common Features

Most MudBlazor.Extensions components share these features:

Theming Support

All components respect MudBlazor's theming system and automatically adapt to light/dark mode:

// Components automatically use theme colors
<MudExUploadEdit Color="Color.Primary" />

Validation

Data editing components support multiple validation approaches:

• DataAnnotations
• FluentValidation
• Custom validation logic

Accessibility

Components are built with accessibility in mind:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility

Responsive Design

All components are responsive and work across different screen sizes:

<MudExObjectEdit WrapInMudGrid="true" />

Component Usage Patterns

Basic Usage

Most components can be used with minimal configuration:

<MudExFileDisplay FileName="document.pdf" Url="@fileUrl" />

Advanced Configuration

Components provide extensive customization options:

<MudExUploadEdit 
    AllowMultiple="true"
    MaxFileSize="10485760"
    AllowedExtensions="@(new[] { ".pdf", ".docx", ".jpg" })"
    AllowDropBox="true"
    AllowGoogleDrive="true"
    @bind-Files="selectedFiles" />

Dialog Integration

Many components have dialog variants for modal interactions:

await dialogService.EditObject(myObject, "Edit Object");
await MudExFileDisplayDialog.Show(dialogService, file);

Performance Considerations

MudBlazor.Extensions components are optimized for performance:

• Virtual scrolling for large lists
• Lazy loading for heavy content
• Efficient rendering to minimize re-renders
• Background processing for intensive operations

Browser Compatibility

Components are tested and supported on:

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

Next Steps

Explore individual component documentation to learn more:

1. Start with Object Edit for form generation
2. Try Upload Edit for file handling
3. Explore Dialog Extensions for enhanced dialogs

Need Help?

• 📖 Check component-specific documentation
• 💡 View examples in the live demo
• 🐛 Report issues on GitHub
• 💬 Ask questions in discussions