Skip to content

Commit 065c188

Browse files
rajendranr-5483rajendranr-5483
authored
Merge pull request SyncfusionExamples#16 from Backiaraj/UG
Prepared sample for Blazor AppBar
2 parents a3dbd62 + ca45dd6 commit 065c188

File tree

276 files changed

+11540
-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.

276 files changed

+11540
-0
lines changed

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/AppBarUGSample.Client.csproj‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<ImplicitUsings>enable</ImplicitUsings>
6+
<Nullable>enable</Nullable>
7+
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
8+
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
13+
<PackageReference Include="Syncfusion.Blazor.Navigations" Version="23.2.6" />
14+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="23.2.6" />
15+
</ItemGroup>
16+
17+
</Project>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/BottomAppBar.razor‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@page "/AppBar/Bottom"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
<SizeRoute></SizeRoute>
7+
<br/>
8+
<div class="control-container">
9+
<SfAppBar ColorMode="AppBarColor.Primary" Position="AppBarPosition.Bottom">
10+
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
11+
<AppBarSpacer></AppBarSpacer>
12+
<SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
13+
</SfAppBar>
14+
<div class="appbar-content" style="font-size: 12px">
15+
<p>
16+
The AppBar also known as action bar or nav bar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions. The control supports height mode, color mode, positioning, and more.
17+
</p>
18+
<p>
19+
The AppBar control provides flexible ways to configure the look and feel of the bar to match your requirement.
20+
</p>
21+
<p>
22+
Developers can control the appearance and behaviors of the AppBar using a rich set of APIs.
23+
</p>
24+
<p>
25+
The AppBar component supports built-in themes such as Material, Bootstrap, Fabric (Office 365), Tailwind CSS, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by either simply overriding SASS variables or using our Theme Studio application.
26+
</p>
27+
</div>
28+
</div>
29+
30+
<style>
31+
.control-container {
32+
height: 420px;
33+
width: 500px;
34+
margin: 0 auto;
35+
position: relative;
36+
}
37+
38+
.control-container .e-btn.e-inherit {
39+
margin: 0 3px;
40+
}
41+
</style>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/CssClass.razor‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@page "/AppBar/css"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
<SizeRoute></SizeRoute>
7+
<br/>
8+
<div class="control-container">
9+
<SfAppBar ColorMode="AppBarColor.Primary" CssClass="custom-appbar">
10+
<SfButton CssClass="e-inherit" IconCss="e-icons e-home"></SfButton>
11+
</SfAppBar>
12+
</div>
13+
14+
<style>
15+
.control-container .e-appbar.custom-appbar {
16+
background: #ff0000;
17+
color: #fff;
18+
}
19+
</style>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/DarkAppBar.razor‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@page "/AppBar/Dark"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
<SizeRoute></SizeRoute>
7+
<br />
8+
<div class="control-container">
9+
<SfAppBar ColorMode="AppBarColor.Dark">
10+
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
11+
<AppBarSpacer></AppBarSpacer>
12+
<SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
13+
</SfAppBar>
14+
</div>
15+
16+
<style>
17+
.control-container {
18+
height: 300px;
19+
margin: 0 auto;
20+
width: 500px;
21+
}
22+
23+
.control-container .e-btn.e-inherit {
24+
margin: 0 3px;
25+
}
26+
</style>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/DenseAppBar.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@page "/AppBar/Dense"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
<SizeRoute></SizeRoute>
7+
<br/>
8+
<div class="control-container">
9+
<SfAppBar ColorMode="AppBarColor.Primary" Mode="AppBarMode.Dense">
10+
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
11+
<span class="dense">Dense AppBar</span>
12+
<AppBarSpacer></AppBarSpacer>
13+
<SfButton CssClass="e-inherit" Content="FREE TRIAL"></SfButton>
14+
</SfAppBar>
15+
</div>
16+
17+
<style>
18+
.control-container .e-btn.e-inherit {
19+
margin: 0 3px;
20+
}
21+
</style>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/DesignWithButton.razor‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@page "/AppBar/Button"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
@using Syncfusion.Blazor.SplitButtons
7+
<SizeRoute></SizeRoute>
8+
<br/>
9+
<div class="control-container">
10+
<SfAppBar ColorMode="AppBarColor.Primary">
11+
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
12+
<SfDropDownButton CssClass="e-inherit" Content="Products">
13+
<DropDownMenuItems>
14+
<DropDownMenuItem Text="Developer"></DropDownMenuItem>
15+
<DropDownMenuItem Text="Analytics"></DropDownMenuItem>
16+
<DropDownMenuItem Text="Reporting"></DropDownMenuItem>
17+
<DropDownMenuItem Text="E-Signature"></DropDownMenuItem>
18+
<DropDownMenuItem Text="Help Desk"></DropDownMenuItem>
19+
</DropDownMenuItems>
20+
</SfDropDownButton>
21+
<AppBarSpacer></AppBarSpacer>
22+
<SfButton CssClass="e-inherit" Content="Login"></SfButton>
23+
</SfAppBar>
24+
</div>
25+
26+
<style>
27+
.control-container .e-btn.e-inherit {
28+
margin: 0 3px;
29+
}
30+
</style>

‎AppBar/BlazorWebApp/AppBarUGSample/AppBarUGSample.Client/Pages/AppBar/DesignWithMenu.razor‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
@page "/AppBar/Menu"
2+
@rendermode InteractiveAuto
3+
4+
@using Syncfusion.Blazor.Navigations
5+
@using Syncfusion.Blazor.Buttons
6+
<SizeRoute></SizeRoute>
7+
<br/>
8+
<div class="control-container">
9+
<SfAppBar ColorMode="AppBarColor.Primary">
10+
<SfButton CssClass="e-inherit" IconCss="e-icons e-menu"></SfButton>
11+
<SfMenu CssClass="e-inherit" TValue="MenuItem">
12+
<MenuItems>
13+
<MenuItem Text="Company">
14+
<MenuItems>
15+
<MenuItem Text="About Us"></MenuItem>
16+
<MenuItem Text="Customers"></MenuItem>
17+
<MenuItem Text="Blog"></MenuItem>
18+
<MenuItem Text="Careers"></MenuItem>
19+
</MenuItems>
20+
</MenuItem>
21+
</MenuItems>
22+
</SfMenu>
23+
<SfMenu CssClass="e-inherit" TValue="MenuItem">
24+
<MenuItems>
25+
<MenuItem Text="Products">
26+
<MenuItems>
27+
<MenuItem Text="Developer"></MenuItem>
28+
<MenuItem Text="Analytics"></MenuItem>
29+
<MenuItem Text="Reporting"></MenuItem>
30+
<MenuItem Text="Help Desk"></MenuItem>
31+
</MenuItems>
32+
</MenuItem>
33+
</MenuItems>
34+
</SfMenu>
35+
<SfMenu CssClass="e-inherit" TValue="MenuItem">
36+
<MenuItems>
37+
<MenuItem Text="About Us"></MenuItem>
38+
</MenuItems>
39+
</SfMenu>
40+
<SfMenu CssClass="e-inherit" TValue="MenuItem">
41+
<MenuItems>
42+
<MenuItem Text="Carrers"></MenuItem>
43+
</MenuItems>
44+
</SfMenu>
45+
<AppBarSpacer></AppBarSpacer>
46+
<SfButton CssClass="e-inherit" Content="Login"></SfButton>
47+
</SfAppBar>
48+
</div>
49+
50+
<style>
51+
.control-container .e-btn.e-inherit {
52+
margin: 0 3px;
53+
}
54+
</style>

0 commit comments

Comments
 (0)