智慧物流>> blazor>> 返回
项目作者： jqwidgets

项目描述 ：
Blazor UI Components Library by jQWidgets. Enterprise-ready User Interface for Blazor
高级语言： HTML
项目地址: git://github.com/jqwidgets/blazor.git
创建时间： 2020-03-16T09:01:57Z
项目社区：https://github.com/jqwidgets/blazor
开源协议：
下载


Blazor

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it’s real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.

Please refer to: https://www.htmlelements.com/blazor/

Prerequisites

.NET Core SDK - This includes everything you need to build and run Blazor WebAssembly apps.

Setup

I. Install templates:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2
II. Create a blazor application:

dotnet new blazorwasm -o jqwidgets-blazor-app

III. Navigate to the application:

cd jqwidgets-blazor-app

IV. Add the jQWidgets.Blazor package:

dotnet add package jQWidgets.Blazor

V. Open _Imports.razor and add the following at the bottom:

@using jQWidgets.Blazor.Components

VI. Open wwwroot/index.html and add the needed styles and scripts. For example if you are going to use JqxBarGauge, the file should look like this:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <meta name="viewport" content="width=device-width" />
  6.         <title>jqwidgets-blazor-app</title>
  7.         <base href="/" ></base>
  9.         <link href="_content/jQWidgets.Blazor/jqwidgets/styles/jqx.base.css">
  10.     </head>
  11.     <body>
  12.         <app>Loading...</app>
  14.         <script src="_content/jQWidgets.Blazor/jqwidgets/jqxcore.js"></script>
  15.         <script src="_content/jQWidgets.Blazor/jqwidgets/jqxdraw.js"></script>
  16.         <script src="_content/jQWidgets.Blazor/jqwidgets/jqxbargauge.js"></script>
  17.         <script src="_content/jQWidgets.Blazor/jqxBlazor.js"></script>
  19.         <script src="_framework/blazor.webassembly.js"></script>
  20.     </body>
  21. </html>

VII. Open Pages/Index.razor and replace the code as follows:

  1. <JqxBarGauge 
  2.     width=600 height=600 colorScheme="scheme02"
  3.     max="max" values="values" tooltip="tooltip">
  4. </JqxBarGauge>
  6. @code {
  7.     private int max = 150;
  9.     private double[] values = new double[4] { 102, 115, 130, 137 };
  11.     private IDictionary<string, bool> tooltip = new Dictionary<string, bool>()
  12.     {
  13.         { "visible", true }
  14.     };
  15. }

VIII. Start the app and check the result:

dotnet watch run
Events Methods & Properties
I. Events
Below is an example of listening to the JqxBarGauge onDrawEnd event and then doing something with the result:

  1. <JqxBarGauge onDrawEnd="onDrawEnd"
  2.     width=600 height=600 values="values">
  3. </JqxBarGauge>
  5. @code {
  6.     private double[] values = new double[4] { 102, 115, 130, 137 };
  8.     private void onDrawEnd(IDictionary<string, object> e) 
  9.     {
  10.         @* Do Something... *@
  11.     }
  12. }

II. Methods & Properties
In order to use methods, first you need to make a reference to the component:

  1. <JqxBarGauge @ref="myBarGauge"
  2.     width="350" height="350" values="values">
  3. </JqxBarGauge>
  5. @code {
  6.     JqxBarGauge myBarGauge;
  8.     private double[] values = new double[4] { 102, 115, 130, 137 };
  10.     protected override void OnAfterRender(bool firstRender)
  11.     {
  12.         if (firstRender)
  13.         {
  14.             double[] newValues = new double[4] { 10, 20, 30, 40 };
  15.             myBarGauge.val(newValues);
  16.         }
  17.     }
  18. }

Blazor Dev Server + Processors

This repo contains the source files for jQWidgets Blazor framework - “jQWidgets.Blazor”

Prerequisite

Node.js

  1. https://nodejs.org/en/

.NET Core SDK

  1. https://dotnet.microsoft.com/download/dotnet-core

Run Dev Server

  1. cd dev-project
  1. dotnet watch run

Library And API Processor

Builds the “jQWidgets.Blazor” library files and generates the API files

  1. cd processors
  2. node library-and-api

Site Demos Processor

Builds the demos hosted on www.jqwidgets.com

  1. cd processors
  2. node site-demos

Getting Started Demos Processor

Builds the demos needed for the getting started documentation.

  1. cd processors
  2. node getting-started-demos

Nuget Library Update

  1. cd library/jQWidgets.Blazor
  2. Open `jQWidgets.Blazor.csproj` and update `Version` tag
  3. dotnet pack

The build file is located in

  1. library/jQWidgets.Blazor/bin/Debug/jQWidgets.Blazor.[VERSION].nupkg

Either update it manually via nuget official site or via CLI

  1. dotnet nuget push [buildFilePath] -k [APIKey] -s https://api.nuget.org/v3/index.json