Skip to content

Commit 0835a1d

Browse files
BackiarajBackiaraj
committed
Prepared UG samples for Blazor LinearGauge and ListBox components
1 parent 9330864 commit 0835a1d

File tree

175 files changed

+5853
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

175 files changed

+5853
-0
lines changed

‎LinearGauge/Client/App.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<Router AppAssembly="@typeof(App).Assembly">
2+
<Found Context="routeData">
3+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
4+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
5+
</Found>
6+
<NotFound>
7+
<PageTitle>Not found</PageTitle>
8+
<LayoutView Layout="@typeof(MainLayout)">
9+
<p role="alert">Sorry, there's nothing at this address.</p>
10+
</LayoutView>
11+
</NotFound>
12+
</Router>

‎LinearGauge/Client/LinearGaugeUGSample.Client.csproj‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net6.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.8" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.8" PrivateAssets="all" />
12+
<PackageReference Include="Syncfusion.Blazor.Layouts" Version="20.3.0.57" />
13+
<PackageReference Include="Syncfusion.Blazor.LinearGauge" Version="20.3.0.57" />
14+
<PackageReference Include="Syncfusion.Blazor.Navigations" Version="20.3.0.57" />
15+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="20.3.0.57" />
16+
</ItemGroup>
17+
18+
<ItemGroup>
19+
<ProjectReference Include="..\Shared\LinearGaugeUGSample.Shared.csproj" />
20+
</ItemGroup>
21+
22+
</Project>

‎LinearGauge/Client/Pages/Annotations/AddAnnotations.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/AddAnnotations"
2+
<AnnotationRoute></AnnotationRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge>
7+
<LinearGaugeAnnotations>
8+
<LinearGaugeAnnotation AxisValue="0" ZIndex="1">
9+
<ContentTemplate>
10+
<div class="custom-annotation">40</div>
11+
</ContentTemplate>
12+
</LinearGaugeAnnotation>
13+
</LinearGaugeAnnotations>
14+
<LinearGaugeAxes>
15+
<LinearGaugeAxis>
16+
<LinearGaugePointers>
17+
<LinearGaugePointer PointerValue="40"></LinearGaugePointer>
18+
</LinearGaugePointers>
19+
</LinearGaugeAxis>
20+
</LinearGaugeAxes>
21+
</SfLinearGauge>
22+
23+
<style type="text/css">
24+
.custom-annotation {
25+
color: white;
26+
background-color: blue;
27+
height: 30px;
28+
width: 30px;
29+
border-radius: 15px;
30+
padding: 4px 0 0 6px;
31+
font-weight: bold;
32+
}
33+
</style>

‎LinearGauge/Client/Pages/Annotations/AnnotationAlignment.razor‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@page "/AnnotationAlignment"
2+
<AnnotationRoute></AnnotationRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge>
7+
<LinearGaugeAnnotations>
8+
<LinearGaugeAnnotation ZIndex="1"
9+
HorizontalAlignment="Placement.Center"
10+
VerticalAlignment="Placement.Center">
11+
<ContentTemplate>
12+
<div class="custom-annotation">40</div>
13+
</ContentTemplate>
14+
</LinearGaugeAnnotation>
15+
</LinearGaugeAnnotations>
16+
<LinearGaugeAxes>
17+
<LinearGaugeAxis>
18+
<LinearGaugePointers>
19+
<LinearGaugePointer PointerValue="40"></LinearGaugePointer>
20+
</LinearGaugePointers>
21+
</LinearGaugeAxis>
22+
</LinearGaugeAxes>
23+
</SfLinearGauge>
24+
25+
<style type="text/css">
26+
.custom-annotation {
27+
color: white;
28+
background-color: blue;
29+
height: 30px;
30+
width: 30px;
31+
border-radius: 15px;
32+
padding: 4px 0 0 6px;
33+
font-weight: bold;
34+
}
35+
</style>

‎LinearGauge/Client/Pages/Annotations/AnnotationPosition.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/AnnotationPosition"
2+
<AnnotationRoute></AnnotationRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge>
7+
<LinearGaugeAnnotations>
8+
<LinearGaugeAnnotation AxisValue="0" ZIndex="1" X="50" Y="-100">
9+
<ContentTemplate>
10+
<div class="custom-annotation">40</div>
11+
</ContentTemplate>
12+
</LinearGaugeAnnotation>
13+
</LinearGaugeAnnotations>
14+
<LinearGaugeAxes>
15+
<LinearGaugeAxis>
16+
<LinearGaugePointers>
17+
<LinearGaugePointer PointerValue="40"></LinearGaugePointer>
18+
</LinearGaugePointers>
19+
</LinearGaugeAxis>
20+
</LinearGaugeAxes>
21+
</SfLinearGauge>
22+
23+
<style type="text/css">
24+
.custom-annotation {
25+
color: white;
26+
background-color: blue;
27+
height: 30px;
28+
width: 30px;
29+
border-radius: 15px;
30+
padding: 4px 0 0 6px;
31+
font-weight: bold;
32+
}
33+
</style>

‎LinearGauge/Client/Pages/Annotations/AnnotationRoute.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<table>
2+
<tr>
3+
<td><a href="AddAnnotations">Add Annotations</a></td>
4+
<td><a href="Change_Z_Index">Change Z Index</a></td>
5+
<td><a href="AnnotationPosition">Annotation Position</a></td>
6+
</tr>
7+
<tr>
8+
<td><a href="AnnotationAlignment">Annotation Alignment</a></td>
9+
<td><a href="MultipleAnnotations">Multiple Annotations</a></td>
10+
</tr>
11+
</table>
12+
13+
14+
<style>
15+
a {
16+
padding-right: 75px;
17+
}
18+
</style>

‎LinearGauge/Client/Pages/Annotations/Change_Z_Index.razor‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/Change_Z_Index"
2+
<AnnotationRoute></AnnotationRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge>
7+
<LinearGaugeAnnotations>
8+
<LinearGaugeAnnotation AxisValue="0" ZIndex="1">
9+
<ContentTemplate>
10+
<div class="custom-annotation">40</div>
11+
</ContentTemplate>
12+
</LinearGaugeAnnotation>
13+
</LinearGaugeAnnotations>
14+
<LinearGaugeAxes>
15+
<LinearGaugeAxis>
16+
<LinearGaugePointers>
17+
<LinearGaugePointer PointerValue="40"></LinearGaugePointer>
18+
</LinearGaugePointers>
19+
</LinearGaugeAxis>
20+
</LinearGaugeAxes>
21+
</SfLinearGauge>
22+
23+
<style type="text/css">
24+
.custom-annotation {
25+
color: white;
26+
background-color: blue;
27+
height: 30px;
28+
width: 30px;
29+
border-radius: 15px;
30+
padding: 4px 0 0 6px;
31+
font-weight: bold;
32+
}
33+
</style>

‎LinearGauge/Client/Pages/Annotations/MultipleAnnotations.razor‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@page "/MultipleAnnotations"
2+
<AnnotationRoute></AnnotationRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge>
7+
<LinearGaugeAnnotations>
8+
<LinearGaugeAnnotation ZIndex="1" AxisValue="100"
9+
X="-110" Y="-35">
10+
<ContentTemplate>
11+
<div class="custom-annotation">Speed to get higher milage</div>
12+
</ContentTemplate>
13+
</LinearGaugeAnnotation>
14+
<LinearGaugeAnnotation AxisValue="0" ZIndex="1">
15+
<ContentTemplate>
16+
<div class="speed">40</div>
17+
</ContentTemplate>
18+
</LinearGaugeAnnotation>
19+
</LinearGaugeAnnotations>
20+
<LinearGaugeAxes>
21+
<LinearGaugeAxis>
22+
<LinearGaugePointers>
23+
<LinearGaugePointer PointerValue="40"></LinearGaugePointer>
24+
</LinearGaugePointers>
25+
</LinearGaugeAxis>
26+
</LinearGaugeAxes>
27+
</SfLinearGauge>
28+
29+
<style type="text/css">
30+
.speed {
31+
color: white;
32+
background-color: blue;
33+
height: 30px;
34+
width: 30px;
35+
border-radius: 15px;
36+
padding: 4px 0 0 6px;
37+
font-weight: bold;
38+
}
39+
40+
.custom-annotation {
41+
background-color: lightgray;
42+
width: 210px;
43+
padding: 2px 5px;
44+
}
45+
</style>

‎LinearGauge/Client/Pages/Appearance/AppearanceRoute.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<table>
2+
<tr>
3+
<td><a href="CustomLinearGaugeArea">Custom LinearGauge Area</a></td>
4+
<td><a href="LinearGaugeTitle">LinearGauge Title</a></td>
5+
<td><a href="NormalContainer">Normal Container</a></td>
6+
</tr>
7+
<tr>
8+
<td><a href="RoundedRectangle">Rounded Rectangle Container</a></td>
9+
<td><a href="Thermometer">Thermometer Container</a></td>
10+
<td><a href="FillLinearGauge">Fill Linear Gauge</a></td>
11+
</tr>
12+
</table>
13+
14+
15+
<style>
16+
a {
17+
padding-right: 75px;
18+
}
19+
</style>

‎LinearGauge/Client/Pages/Appearance/CustomLinearGaugeArea.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@page "/CustomLinearGaugeArea"
2+
<AppearanceRoute></AppearanceRoute>
3+
4+
@using Syncfusion.Blazor.LinearGauge
5+
6+
<SfLinearGauge Width="200px" Height="400px" Background="skyblue">
7+
<LinearGaugeBorder Color="#FF0000" Width="2"></LinearGaugeBorder>
8+
<LinearGaugeMargin Left="20" Right="20" Top="20" Bottom="20"></LinearGaugeMargin>
9+
<LinearGaugeAxes>
10+
<LinearGaugeAxis>
11+
</LinearGaugeAxis>
12+
</LinearGaugeAxes>
13+
</SfLinearGauge>

0 commit comments

Comments
 (0)