DOCSEARCHbyAlgolia
Submit Docs

Blazor Bootstrap Documentation

repository·main·Indexed 22 days ago

https://github.com/vikramlearning/blazorbootstrap

An enterprise-class component library for Blazor applications built on the Bootstrap CSS framework. It provides a wide range of UI components including forms (AutoComplete, Currency Input), data visualization (Bar, Line, Pie charts), layout elements (Grid, Sidebar, Tabs), and feedback mechanisms (Modals, Toasts, Spinners). The library supports Blazor Server and Blazor WebAssembly hosting models and is available via NuGet (version 3.5.0) and .NET CLI project templates.

Tokens
80.2K
Snippets
186
Records
438
Agent score
75%

What's inside Blazor Bootstrap

  1. Explore Blazor Bootstrap components

    main

    Blazor Bootstrap provides a wide range of enterprise-class components including forms, data visualization (charts), layout elements, and interactive UI components.

    Common component categories include:

    • Forms: AutoComplete, Checkbox Input, Currency Input, Date Input, Enum Input, Number Input, Password Input, Radio Input, RangeInput, Switch, Text Input, TextArea Input, Time Input.
    • Data Visualization: Bar chart, Doughnut chart, Line chart, Pie chart, Polar Area chart, Radar chart, Scatter chart.
    • Layout & Navigation: Accordion, Breadcrumb, Card, Grid, Pagination, Sidebar, Sidebar2, Tabs.
    • Feedback & Overlays: Alerts, Confirm Dialog, Modals, Offcanvas, Spinners, Toasts, Tooltips.
    • Other: Carousel, Google Map, Markdown, PDF Viewer, Sortable List.

  2. Blazor PDF Viewer Overview

    main

    The BlazorBootstrap.PDFViewer component allows you to embed and view PDF documents within your Blazor application. It supports displaying PDFs via a direct URL or a Base64 encoded string.

    Key Parameters

    ParameterTypeDescription
    UrlstringThe direct URL to the PDF file.
    Base64StringstringA Base64 encoded string representing the PDF content.
    OrientationPdfViewerOrientationThe orientation of the viewer (e.g., Portrait or Landscape).

    Callback Events

    EventDescription
    OnLoadTriggered when the PDF document has successfully loaded.
    OnErrorTriggered if there is an error loading the PDF.

  3. New Features in Blazor Bootstrap v3.0.0-preview.1

    main

    The v3.0.0-preview.1 release adds several new capabilities across components:

    Chart Components

    • Added support for Tick configuration.
    • Added support for Grid configuration.

    Grid Component

    • FilterButtonColor: New parameter to change the color of the filter button.
    • FilterButtonCSSClass: New parameter to apply custom CSS classes to the filter button.
    • Filter Types: Now supports DoesNotContain filters, as well as Enum and Guid support.

    Sidebar & Sidebar2

    • Added the Href parameter to both Sidebar and Sidebar2 components.

    Framework Support

    • The library now explicitly targets .NET 6 and .NET 8 frameworks.

  5. Use Blazor Chart Components for data visualization

    main

    Blazor Bootstrap provides a suite of chart components built on top of Chart.js. These components are designed for high performance when rendering large datasets and offer a variety of visualization types.

    Supported chart types include:

    • Bar Chart (supports mixed bar/line datasets)
    • **Bubble Chart
    • Doughnut Chart
    • Line Chart (supports mixed bar/line datasets)
    • Pie Chart
    • Polar Area Chart
    • Radar Chart
    • Scatter Chart

  10. Configure Dropdown direction and alignment

    main

    You can control where the DropdownMenu appears relative to the toggle using the Direction parameter on the Dropdown component:

    • DropdownDirection.Dropup: Triggers the menu above the element.
    • DropdownDirection.DropupCentered: Triggers a centered menu above the element.
    • DropdownDirection.Dropend: Triggers the menu to the right of the element.
    • DropdownDirection.Dropstart: Triggers the menu to the left of the element.
    <Dropdown Color="DropdownColor.Secondary" Direction="DropdownDirection.Dropup">
    <DropdownToggleButton>Dropup button</DropdownToggleButton>
    <DropdownMenu>
        <DropdownItem To="#" Type="DropdownItemType.Link">Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

  11. Create stacked and grouped bar charts

    main

    Blazor Bootstrap supports both stacked bars and grouped stacks using the Stacked property on scales and the Stack property on datasets.

    Stacked Bar Chart

    To stack all datasets on top of each other, set Stacked = true on both the X and Y scales in BarChartOptions.

    Grouped Stacks

    To create multiple distinct stacked groups within the same chart, assign a unique string to the Stack property of each BarChartDataset. Datasets sharing the same Stack ID will be stacked together, while different IDs will create separate groups side-by-side.

  12. Customize marker appearance with PinElement

    main

    You can customize the visual style of a marker by assigning a PinElement to the PinElement property of a GoogleMapMarker.

    Supported customization options include:

    • Scale: Adjust the size of the marker (e.g., 1.5).
    • Background: Set the background color (e.g., "#FBBC04").
    • BorderColor: Set the border color (e.g., "#137333").
    • GlyphColor: Set the color of the glyph/icon (e.g., "white").
    • GlyphText: Set text to display inside the pin (e.g., "A"). Setting this to an empty string "" hides the glyph.
    • GlyphSrc: Provide a URL for an image to use as a glyph.
    • UseIconFonts: Set to true when using Bootstrap icons or other icon fonts via the Glyph property.
    // Example of a customized marker
new GoogleMapMarker()
{
    PinElement = new PinElement
    {
        Scale = 1.5,
        Background = "#FBBC04",
        BorderColor = "#137333",
        GlyphText = "A",
        GlyphColor = "white"
    },
    Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
    Title = "Custom Marker"
}