Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use Blazor component library Blazui", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use the Blazor component library Blazui!

What is Blazui?

Blazui has been published for some time, but has not written related articles, now take the time to write some. Nine months ago, I wanted to develop a background management system with Blazor, but I couldn't find a free Blazor UI framework that works well. I was advised to quit several times, but I didn't want to find it, but I wanted to use Blazor, so I came up with the idea of writing a UI framework for Blazor, which is Blazui. But I don't want to write CSS myself. I copied the CSS and HTML structure of Element UI. What can programmers do? Did not choose Bootstrap because its own function is weak, if I want to do a bunch of functions that it does not have, it means that CSS I have to write my own Antd because it does not have a ready-made framework that is easy to copy, which means that the structure of HTML is clear. At present, Blazui is only server-side rendering, client-side rendering is waiting for Microsoft to release the official version.

Prerequisites for installing Blazui to Blazor projects

Install .net Core 3.1

Install VS2019 and update to the latest version

Installation steps

New Blazor server-side rendering application

Install Nuget package Blazui.Component

Modify the _ Host.cshtml under the Pages folder to the following

@ page "/" @ namespace Blazui.ServerRender.Pages / / the Blazui.ServerRender here needs to be changed to your actual namespace @ addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers Blazui, the blazor version of Element, write the front-end UI framework with .net, and use @ (await Html.RenderComponentAsync (RenderMode.ServerPrerendered) right out of the box).

Among them

Index.css files are style files for Element

The dom.js file is the js file needed by Blazui itself.

Fix.css file is a style file supplemented by Blazui to Element.

Add the following code to the _ Imports.razor file

@ using Blazui.Component.Container@using Blazui.Component.Button@using Blazui.Component.Dom@using Blazui.Component.Dynamic@using Blazui.Component.NavMenu@using Blazui.Component.Input@using Blazui.Component.Radio@using Blazui.Component.Select@using Blazui.Component.CheckBox@using Blazui.Component.Switch@using Blazui.Component.Table@using Blazui.Component.Popup@using Blazui.Component.Pagination@using Blazui.Component.Form@using Blazui.Component.Upload@using Blazui.Component

Replace the ConfigureServices method of Startup.cs with the following code

Public void ConfigureServices (IServiceCollection services) {services.AddRazorPages (); services.AddServerSideBlazor (); services.AddBlazuiServices (); services.AddSingleton ();}

In order for the pop-up component to take effect, you need to change the contents of the MainLayout.razor to the following

@ inherits LayoutComponentBase @ Body

Enter the following code on any page to run the visual effect

This is the main button. I believe you have a deeper understanding of "how to use Blazor component library Blazui". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.