Location>code7788 >text

NET 8 Microsoft Free and Open Source Blazor UI Component Library

Popularity：859 ℃/2024-09-10 10:54:19

preamble

With the release of .NET 8, Microsoft introduced the official free and open source Blazor UI component library -- Fluent UI Blazor.

Component libraries provide the tools that web applications need to ensure that applications maintain a consistent look and feel with Microsoft products.Fluent UI Blazor not only includes a wrapper around Microsoft's official Fluent UI Web Components, but also provides additional components and functionality to simplify the development process and enhance the user experience.

This article will cover the features and benefits of Fluent UI Blazor, as well as help you get up to speed quickly and utilize this powerful toolset to enhance your Blazor projects.

Projects

Blazor is a powerful framework for building interactive web applications utilizing the C# language. Combined with Microsoft's Fluent UI library, it's easy to create stylish and responsive user interfaces.

The Microsoft Fluent UI Blazor Component Library is designed for Core Blazor applications for the .NET 8 Blazor project.

If you are using .NET 6 or 7, use the v3 version called .

Fluent UI Blazor is Microsoft's official library of UI components that help us build applications that conform to the Fluent design style, giving them the look and feel of modern Microsoft products.

This library not only contains a wrapper for Microsoft's official Fluent UI Web Components, but also provides additional support and components to better utilize the Fluent design system and simplify the Fluent UI integration process.

Project Characteristics

Blazor is a UI framework for building web applications using the Razor syntax using the .NET framework and the C# programming language.

Blazor supports the development of Single Page Applications (SPAs) and Web Services that directly manipulate the HTML DOM with compiled C# code, reducing reliance on JavaScript.

The goal is to enable developers to write Web applications in the familiar C# language, thereby increasing development efficiency and reducing learning costs.

  • Fluent Design: The components follow Microsoft's Fluent design system, providing a modern and unified user interface.
  • easy-to-use: Fluent UI Blazor components can be easily integrated into a project via dotnet templates or by manually installing the NuGet package.
  • Customizability: Components built on FAST (Adaptive UI) technology support a high degree of customization and personalization while automatically maintaining accessibility standards.
  • add-on package: Additional packages containing Fluent UI system icons and emoticons are available to enhance the visual appearance of the application.

Project Source Code

Download the project source code through the GitHub address and select different versions of the branch for learning and reviewing Fluent UI Blazor components as shown below:

Project use

1. Create a Blazor project

First create a new Blazor Server or Blazor WebAssembly project, add the corresponding NuGet package, and then integrate Fluent UI into Blazor.

2, create a sample data source

In data-driven applications, connecting to data sources is an essential step.

The example will use an in-memory data service to model the data source. Create a Services folder and add files that define the data model and the methods for obtaining data:

namespace 
{
    /// <summary>
    /// data service
/// </summary>
    public class DataService
    {
        /// <summary>
        /// Product Data
/// </summary>
        private readonly List<Product> Products = new()
        {
            // Analog Product Data
            new() { Id = 1, Name = "DotNet Technician 01", CreateTime =  },
            new() { Id = 2, Name = "DotNet Technician 02", CreateTime =  },
            new() { Id = 3, Name = "DotNet Technician 03", CreateTime =  },
            new() { Id = 4, Name = "DotNet Technician 04", CreateTime =  },
            new() { Id = 5, Name = "DotNet Technician 05", CreateTime =  }
        };
​
        /// <summary>
        /// Get Product List
/// </summary>
        /// <returns></returns>
        public List<Product> GetProducts()
        {
            return Products;
        }
    }
​
    /// <summary>
    /// product entity
/// </summary>
    public class Product
    {
        /// <summary>
        /// Product ID
/// </summary>
        public int Id { get; set; }
​
        /// <summary>
        /// Pseudolaric acid
/// </summary>
        public string Name { get; set; }
​
        /// <summary>
        /// Creation time
/// </summary>
        public DateTime? CreateTime { get; set; } 
    }
}

3. Registration services

Register the service in to use it in your application:

<DataService>();
<IKeyCodeService, KeyCodeService>();

4、Using Fluent UI components to create the UI

With the initialized data source set up, the next step is to create the user interface.

Open the file in the Pages folder and replace its contents:

@page "/"
@using 
@using 
@inject DataService DataService
​
<FluentCard>
    <h3>Product List</h3
    <FluentStack>
        <FluentDataGrid Items="@()" TGridItem="Product">
            <PropertyColumn Property="@(p => )" Sortable="true" />
            <PropertyColumn Property="@(p => )" Sortable="true" />
            <PropertyColumn Property="@(p => )" Format="yyyy-MM-dd hh:mm:ss" Sortable="true" />
        </FluentDataGrid>
    </FluentStack>
</FluentCard>
​
@code {
    private List<Product> products;
​
    protected override void OnInitialized()
    {
        // Load product data during initialization
        products = ();
    }
}

5. Running program effects

Open your browser and visithttps://localhost:xxxxThen we will be able to see the list of products created using Fluent UI.

UI Component Showcase

Online document presentation:

By accessing the address of the online documentation to view the final rendering of each component and the writing of the component code, it is easy for us to quickly access and learn, and improve the efficiency of development.

1. Theme

2. Tables

3. Selection box

4、Slider

5. Progress bar

6. Buttons

 

This article only shows some of the components, please visit the online documentation for more details. In the documentation you can find a detailed list of components, usage examples and best practices to help you get the most out of Fluent UI Blazor.

Project Address

GitHub：/microsoft/fluentui-blazor

Online documentation:

Project Summary

By combining Blazor's component model with Fluent UI's powerful component library, we were able to quickly develop professional and modern web applications.

The Blazor technology stack not only simplifies the development process, but also provides a high degree of flexibility and scalability to respond to changing user experience requirements.

ultimate

If you found this article helpful, why not support it with a like? Your support is what keeps me motivated to continue sharing my knowledge. Feel free to leave a comment if you have any questions or need further help.

You can also join WeChat[DotNet Technician] community to share ideas and grow with other tech-loving peers!Excellence is a habit, so feel free to leave a comment and learn!

<Previous Next>