https://github.com/jqwidgets/blazor
Blazor UI Components Library by jQWidgets. Enterprise-ready User Interface for Blazor
https://github.com/jqwidgets/blazor
blazor blazor-application blazor-chart blazor-component blazor-components blazor-grid jqwidgets
Last synced: about 1 month ago
JSON representation
Blazor UI Components Library by jQWidgets. Enterprise-ready User Interface for Blazor
- Host: GitHub
- URL: https://github.com/jqwidgets/blazor
- Owner: jqwidgets
- Created: 2020-03-16T09:01:57.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-09T05:05:24.000Z (almost 4 years ago)
- Last Synced: 2025-03-31T13:02:49.404Z (2 months ago)
- Topics: blazor, blazor-application, blazor-chart, blazor-component, blazor-components, blazor-grid, jqwidgets
- Language: HTML
- Homepage: https://blazor.jqwidgets.com
- Size: 31.1 MB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```
jqwidgets-blazor-app
Loading...
```
VII. Open Pages/Index.razor and replace the code as follows:
```
@code {
private int max = 150;
private double[] values = new double[4] { 102, 115, 130, 137 };
private IDictionary tooltip = new Dictionary()
{
{ "visible", true }
};
}
```
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:
```
@code {
private double[] values = new double[4] { 102, 115, 130, 137 };
private void onDrawEnd(IDictionary e)
{
@* Do Something... *@
}
}
```
II. Methods & Properties
In order to use methods, first you need to make a reference to the component:
```
@code {
JqxBarGauge myBarGauge;
private double[] values = new double[4] { 102, 115, 130, 137 };
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
double[] newValues = new double[4] { 10, 20, 30, 40 };
myBarGauge.val(newValues);
}
}
}
```
# Blazor Dev Server + Processors
### This repo contains the source files for jQWidgets Blazor framework - "jQWidgets.Blazor"
## Prerequisite
### Node.js
```bash
https://nodejs.org/en/
```
### .NET Core SDK
```bash
https://dotnet.microsoft.com/download/dotnet-core
```
## Run Dev Server
```bash
cd dev-project
```
```bash
dotnet watch run
```
## Library And API Processor
### Builds the "jQWidgets.Blazor" library files and generates the API files
```bash
cd processors
node library-and-api
```
## Site Demos Processor
### Builds the demos hosted on www.jqwidgets.com
```bash
cd processors
node site-demos
```
## Getting Started Demos Processor
### Builds the demos needed for the getting started documentation.
```bash
cd processors
node getting-started-demos
```
## Nuget Library Update
```bash
cd library/jQWidgets.Blazor
Open `jQWidgets.Blazor.csproj` and update `Version` tag
dotnet pack
```
#### The build file is located in
```bash
library/jQWidgets.Blazor/bin/Debug/jQWidgets.Blazor.[VERSION].nupkg
```
#### Either update it manually via nuget official site or via CLI
```bash
dotnet nuget push [buildFilePath] -k [APIKey] -s https://api.nuget.org/v3/index.json
```