DOCSEARCHbyAlgolia
Submit Docs

BootstrapBlazor UI Component Library

website·Indexed 34 days ago

https://www.blazor.zone/

An enterprise-grade Blazor UI component library based on Bootstrap 5. Features a wide range of components for layout, navigation, forms, upload, tables, and data, along with 36 built-in services such as AjaxService, DialogService, and ClipboardService available via dependency injection.

Tokens
1.5K
Snippets
3
Records
11
Agent score
20%

What's inside BootstrapBlazor

  1. BootstrapBlazor Component Hierarchy Overview

    BootstrapBlazor organizes its components into several categories to support enterprise application development:

    • Base Classes: Core logic for components, including BootstrapComponentBase, BootstrapModuleComponentBase (for JS isolation), and IdComponentBase (for automatic client ID generation).
    • Utility Components: General purpose tools like ThemeProvider, RenderTemplate, and Script.
    • Layout Components: Structural elements such as Layout, Navbar, Row, Stack, and a comprehensive Toolbar system (Toolbar, ToolbarItem, ToolbarSeparator, etc.).
    • Navigation Components: Tools for app movement including Menu, SideMenu, Pagination, Breadcrumb, Tab, and various Navbar sub-components.
    • Form Components: A vast array of input controls including BootstrapInput, Select, Cascader, DatePicker, DateTimePicker, Transfer (shuttle box), and validation wrappers like ValidateForm.

  2. Install and configure BootstrapBlazor

    To use BootstrapBlazor in a Blazor project, install the NuGet package, register the service in the dependency injection container, add the necessary namespace to your imports, and include the required CSS and JS assets in your root HTML file.
    # Install the package
dotnet add package BootstrapBlazor
    // Program.cs
builder.Services.AddBootstrapBlazor();
    @* _Imports.razor *@
@using BootstrapBlazor.Components
    <!-- App.razor or _Host.cshtml -->
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet" />
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

  3. Navigate BootstrapBlazor Source Code for Component Details

    When documentation is insufficient, you can find the implementation details, parameters, and logic for any BootstrapBlazor component in the GitHub repository.

    Component File Structure: Each component is located in src/BootstrapBlazor/Components/{ComponentName}/ and typically consists of:

    • {Component}.razor: The Razor template (UI).
    • {Component}.razor.cs: Component logic and parameter definitions.
    • {Component}Base.cs: The base class (if applicable).
    • {Component}Option.cs: Configuration options for the component.
    • {Component}Service.cs: Associated service class (for components like Dialog or Toast).

    Finding Component Parameters: To identify the available properties you can set on a component, look for properties decorated with the [Parameter] attribute in the .razor.cs or .cs files.

    /// <summary>
/// Get/Set whether to show the toolbar
/// </summary>
[Parameter]
public bool ShowToolbar { get; set; }

  4. BootstrapBlazor Data Display Components

    A wide array of data-centric components are available for various UI needs, including:

    • Visual indicators: Badge, ShieldBadge, Circle, Light, Progress
    • Media: Avatar, Camera, ImagePreviewer, ImageViewer, SvgIcon, BootstrapBlazorIcon
    • Layout/Containers: Card, GroupBox, Collapse, Drawer, IFrame
    • Interactive: Calendar, Carousel, DropdownWidget, Search, Segmented, SwitchButton, Tree, TreeView
    • Specialized: Captcha, Handwritten (signatures), SpeechWave (voice recognition), QueryBuilder, Waterfall, Watermark

  5. BootstrapBlazor Notification and Feedback Components

    Components for user alerts and system feedback include:

    • Overlays: Dialog, Modal, ModalDialog, EditDialog, SearchDialog, Popover, Drawer
    • Alerts: Alert, SweetAlert, Toast, ToastContainer, Message
    • Feedback: Spinner, Progress, Console, ConsoleLogger
    • Interaction: ContextMenu, DialButton, PopConfirmButton, Tooltip

  6. BootstrapBlazor Skeleton Screen Components

    To improve perceived performance during loading, BootstrapBlazor provides skeleton screen components including SkeletonAvatar, SkeletonTable, and SkeletonTree, all inheriting from SkeletonBase.

  7. BootstrapBlazor Upload Components

    BootstrapBlazor provides several components for handling file uploads, including specialized versions for avatars and drag-and-drop interfaces. Base classes are available for extending upload functionality.

  8. Available BootstrapBlazor Built-in Services

    BootstrapBlazor provides a wide array of services available via dependency injection to handle common UI and system tasks. Key services include:

    • UI Feedback & Dialogs: DialogService (Dialogs), ToastService (Toast notifications), MessageService (Message popups), SwalService (SweetAlert popups), and MaskService (Screen masking).
    • System & Browser: ClipboardService (Clipboard), FullScreenService (Full screen mode), NotificationService (Browser notifications), TitleService (Page title management), and WebClientService (Web client operations).
    • Data & Files: AjaxService (Ajax requests), DownloadService (File downloads), IZipArchiveService (Zip archiving), and IHtml2Pdf (HTML to PDF export).
    • Hardware & Device: IAudioDevice / IVideoDevice (Media devices), IBluetooth (Bluetooth), IGeoLocationService (GPS/Location), ISerialService (Serial communication), and EyeDropperService (Screen color picking).
    • Utilities: IPinyinService (Pinyin conversion), IBrowserFingerService (Browser fingerprinting), IIpLocatorProvider (IP location), and IVersionService (Component versioning).

  9. BootstrapBlazor Table Filtering Components

    BootstrapBlazor provides a robust set of filter components specifically designed for table columns, including:

    • Type-specific filters: BoolFilter, DateTimeFilter, NumberFilter, StringFilter, RegexFilter, EnumFilter
    • Selection filters: MultiFilter, MultiSelectFilter, LookupFilter
    • Infrastructure: FilterProvider, FilterLogicItem, TableColumnFilter, and FilterBase for custom filter implementation.

  10. Locate BootstrapBlazor Component Samples

    Concrete usage examples for BootstrapBlazor components can be found in the server-side sample directory of the GitHub repository.
    https://raw.githubusercontent.com/dotnetcore/BootstrapBlazor/refs/heads/main/src/BootstrapBlazor.Server/Components/Samples/{ComponentName}s.razor

  11. BootstrapBlazor Table Components

    The library includes a suite of table-related components for data presentation, including a base Table component, advanced sorting dialogs, extension buttons, footer cells, and toolbar controls.