DOCSEARCHbyAlgolia
Submit Docs

MASA Blazor Documentation

repository·main·Indexed 23 days ago

https://github.com/masastack/masa.blazor

A comprehensive Material Design component library for Blazor applications. It provides pre-built UI components for layouts, frames, loading states, and global exception handling, with deep .NET integrations for URL linkages, breadcrumbs, navigation, advanced search, and i18n. The library includes specialized components such as the Splitter for resizable layouts and MTemplateTable for GraphQL-driven data rendering.

Tokens
136.2K
Snippets
218
Records
1.1K
Agent score
79%

What's inside MASA Blazor

  1. Overview of MASA Blazor

    main
    MASA Blazor is a standard basic component library for Blazor based on Material Design specifications. It provides preset components for common scenarios such as layouts, frames, loading states, and global exception handling. The library aims to reduce development cycles and improve efficiency by offering modular, responsive, and high-performance components. It includes deep integrations for .NET features like URL linkages, breadcrumbs, navigation, advanced search, and i18n.

  3. What is MASA Blazor?

    main

    MASA Blazor is a Blazor component library that follows the Material Design design specification. It provides pre-built components for standard scenarios such as layouts, dialogs, loading states, and global exception handling.

    Key characteristics include:

    • Modular and Responsive: Components are designed to be highly performant and adaptable to different screen sizes.
    • Material Design Compliance: Every component is meticulously designed to adhere to Material Design standards.
    • Enterprise Ready: Maintained by a professional full-time technical team, offering enterprise-level support and regular updates.
    • MASA Blazor Pro: A specialized version that provides a complete set of Web solutions and preset layouts for common real-world scenarios to shorten development cycles.

  7. Use MAutocomplete for autocomplete functionality

    main

    The MAutocomplete component extends MSelect by adding item filtering capabilities. It is designed to handle both large datasets and dynamic data fetched from APIs.

    Important Configuration Rules:

    • Object Binding: When using an Object as the Items property, you must use ItemText and ItemValue to map the object properties to the display text and underlying value. These default to Text and Value but can be customized.
    • Menu Styling: The Auto property within MenuProps only supports the default input style.
    • Browser Autocomplete: Browser-level autocomplete is disabled by default, though behavior may vary by browser.

  8. Use the MSheet component

    main
    The MSheet component serves as the foundational 'paper' element for many other MASA Blazor components like MCard and MToolbar. It is used to implement Material Design concepts such as elevation (shadows) and surface shapes. You can use it to create basic containers that support properties like Rounded, Shaped, and Elevation to control the visual appearance of the surface.

  12. Use the Markdown Parser component

    main

    The Markdown Parser is a wrapper around markdown-it(v13.0.1). It includes several built-in plugins:

    • markdown-it-anchor: Configure anchor styles via AnchorOptions.
    • markdown-it-attrs: Add classes, identifiers, and attributes using {.class #identifier attr=value} syntax.
    • markdown-it-container: Create custom block-level containers.
    • markdown-it-front-matter: Parses YAML Front Matter.
    • markdown-it-header-sections: Groups headings into sections (requires the HeaderSections property to be enabled).
    • markdown-it-todo: Renders [ ] and [x] as checkboxes.

    It also supports syntax highlighting via prism or highlightjs (refer to the MSyntaxHighlight component).