Skip to content

Commit 04ed36c

Browse files
bmarkovbmarkov
authored
Create README.md
1 parent 32cec46 commit 04ed36c

File tree

1 file changed

+105
-0
lines changed

1 file changed

+105
-0
lines changed

‎release/documentation/README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
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.
2+
3+
Prerequisites
4+
.NET Core SDK - This includes everything you need to build and run Blazor WebAssembly apps.
5+
6+
Setup
7+
I. Install templates:
8+
9+
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview9.19465.2
10+
II. Create a blazor application:
11+
12+
dotnet new blazorwasm -o jqwidgets-blazor-app
13+
III. Navigate to the application:
14+
15+
cd jqwidgets-blazor-app
16+
IV. Add the jQWidgets.Blazor package:
17+
18+
dotnet add package jQWidgets.Blazor
19+
V. Open _Imports.razor and add the following at the bottom:
20+
21+
@using jQWidgets.Blazor.Components
22+
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:
23+
```
24+
<!DOCTYPE html>
25+
<html>
26+
<head>
27+
<meta charset="utf-8" />
28+
<meta name="viewport" content="width=device-width" />
29+
<title>jqwidgets-blazor-app</title>
30+
<base href="/" />
31+
32+
<link href="_content/jQWidgets.Blazor/jqwidgets/styles/jqx.base.css">
33+
</head>
34+
<body>
35+
<app>Loading...</app>
36+
37+
<script src="_content/jQWidgets.Blazor/jqwidgets/jqxcore.js"></script>
38+
<script src="_content/jQWidgets.Blazor/jqwidgets/jqxdraw.js"></script>
39+
<script src="_content/jQWidgets.Blazor/jqwidgets/jqxbargauge.js"></script>
40+
<script src="_content/jQWidgets.Blazor/jqxBlazor.js"></script>
41+
42+
<script src="_framework/blazor.webassembly.js"></script>
43+
</body>
44+
</html>
45+
```
46+
VII. Open Pages/Index.razor and replace the code as follows:
47+
```
48+
<JqxBarGauge
49+
width=600 height=600 colorScheme="scheme02"
50+
max="max" values="values" tooltip="tooltip">
51+
</JqxBarGauge>
52+
53+
@code {
54+
private int max = 150;
55+
56+
private double[] values = new double[4] { 102, 115, 130, 137 };
57+
58+
private IDictionary<string, bool> tooltip = new Dictionary<string, bool>()
59+
{
60+
{ "visible", true }
61+
};
62+
}
63+
```
64+
VIII. Start the app and check the result:
65+
66+
dotnet watch run
67+
Events Methods & Properties
68+
I. Events
69+
Below is an example of listening to the JqxBarGauge onDrawEnd event and then doing something with the result:
70+
```
71+
<JqxBarGauge onDrawEnd="onDrawEnd"
72+
width=600 height=600 values="values">
73+
</JqxBarGauge>
74+
75+
@code {
76+
private double[] values = new double[4] { 102, 115, 130, 137 };
77+
78+
private void onDrawEnd(IDictionary<string, object> e)
79+
{
80+
@* Do Something... *@
81+
}
82+
}
83+
```
84+
II. Methods & Properties
85+
In order to use methods, first you need to make a reference to the component:
86+
```
87+
<JqxBarGauge @ref="myBarGauge"
88+
width="350" height="350" values="values">
89+
</JqxBarGauge>
90+
91+
@code {
92+
JqxBarGauge myBarGauge;
93+
94+
private double[] values = new double[4] { 102, 115, 130, 137 };
95+
96+
protected override void OnAfterRender(bool firstRender)
97+
{
98+
if (firstRender)
99+
{
100+
double[] newValues = new double[4] { 10, 20, 30, 40 };
101+
myBarGauge.val(newValues);
102+
}
103+
}
104+
}
105+
```

0 commit comments

Comments
 (0)