Skip to content

Added blazor tab sample #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 8, 2020
Merged

Added blazor tab sample #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
Binary file added Blazor Toolbar Video format file.docx
View file
Open in desktop
Binary file not shown.
11 changes: 11 additions & 0 deletions BlazorExample.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Syncfusion.Blazor" Version="18.1.0.46" />
</ItemGroup>

</Project>
15 changes: 15 additions & 0 deletions Data/WeatherForecast.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
using System;

namespace BlazorExample.Data
{
public class WeatherForecast
{
public DateTime Date { get; set; }

public int TemperatureC { get; set; }

public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

public string Summary { get; set; }
}
}
25 changes: 25 additions & 0 deletions Data/WeatherForecastService.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
using System;
using System.Linq;
using System.Threading.Tasks;

namespace BlazorExample.Data
{
public class WeatherForecastService
{
private static readonly string[] Summaries = new[]
{
"Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
};

public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
{
var rng = new Random();
return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
{
Date = startDate.AddDays(index),
TemperatureC = rng.Next(-20, 55),
Summary = Summaries[rng.Next(Summaries.Length)]
}).ToArray());
}
}
}
16 changes: 16 additions & 0 deletions Pages/Counter.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
private int currentCount = 0;

private void IncrementCount()
{
currentCount++;
}
}
16 changes: 16 additions & 0 deletions Pages/Error.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
@page "/error"


<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>

<h3>Development Mode</h3>
<p>
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>
46 changes: 46 additions & 0 deletions Pages/FetchData.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@page "/fetchdata"

@using BlazorExample.Data
@inject WeatherForecastService ForecastService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}

@code {
private WeatherForecast[] forecasts;

protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
}
132 changes: 132 additions & 0 deletions Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
@page "/"

<SfTab Width="600" CssClass="tab_content e-fill" HeaderPlacement="@HeaderPosition.Top" OverflowMode="@OverflowMode.Popup">
<TabItems>
<TabItem Content="HyperText Markup Language is the standard markup language used to create web pages.">
<ChildContent>
<TabHeader Text="HTML">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers.">
<ChildContent>
<TabHeader Text="Java">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="JavaScript">
</TabHeader>
</ChildContent>
<ContentTemplate>
<div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.</div>
</ContentTemplate>
</TabItem>
<TabItem Content="The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.">
<ChildContent>
<TabHeader Text="VB.Net"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Xamarin is a San Francisco, California based software company created in May 2011[3] by the engineers that created Mono,[4] Mono for Android and MonoTouch that are cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET). With a C#-shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms.[5] Xamarin has over 1 million developers in more than 120 countries around the World as of May 2015.">
<ChildContent>
<TabHeader Text="Xamarin"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, web applications and web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.">
<ChildContent>
<TabHeader Text="ASP.NET"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="The ASP.NET MVC is a web application framework developed by Microsoft, which implements the model–view–controller (MVC) pattern. It is open-source software, apart from the ASP.NET Web Forms component which is proprietary. In the later versions of ASP.NET, ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using only Razor pages) will merge into a unified MVC 6.The project is called ASP.NET vNext.">
<ChildContent>
<TabHeader Text="ASP.NET MVC"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.">
<ChildContent>
<TabHeader Text="PHP">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Ruby is an interpreted, high-level, general-purpose programming language.It runs on a variety of platforms, such as Windows, Mac OS and UNIX.">
<ChildContent>
<TabHeader Text="Ruby">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="C# is intended to be a simple, modern, general-purpose, object-oriented programming language. Its development team is led by Anders Hejlsberg. The most recent version is C# 5.0, which was released on August 15, 2012.">
<ChildContent>
<TabHeader Text="C Sharp(C#)"></TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Python was designed with an emphasis on code readability, and its syntax allows programmers to express their concepts in fewer lines of code.">
<ChildContent>
<TabHeader Text="Python">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Perl is a general purpose, high level interpreted and dynamic programming language. Perl supports both the procedural and Object-Oriented programming.">
<ChildContent>
<TabHeader Text="Perl">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="SQL gives you the ability to find necessary information fast and in a reliable way.">
<ChildContent>
<TabHeader Text="SQL">
</TabHeader>
</ChildContent>
</TabItem>
</TabItems>
</SfTab>

@*Code snippet for two-way binding*@

@*<SfNumericTextBox TValue="double" Min="0" Max="4" Width="200px"
@bind-Value="@ChangedValue">
</SfNumericTextBox>
<br />
<br />
<SfTab CssClass="tab_content e-fill" @bind-SelectedItem="@ChangedValue">
<TabItems>
<TabItem Content="HyperText Markup Language is the standard markup language used to create web pages.">
<ChildContent>
<TabHeader Text="HTML">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem Content="Java is used in a wide variety of computing platforms from embedded devices and mobile phones to enterprise servers and supercomputers.">
<ChildContent>
<TabHeader Text="Java">
</TabHeader>
</ChildContent>
</TabItem>
<TabItem>
<ChildContent>
<TabHeader Text="JavaScript">
</TabHeader>
</ChildContent>
<ContentTemplate>
<div>JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.</div>
</ContentTemplate>
</TabItem>
<TabItem Content="The command-line compiler, VBC.EXE, is installed as part of the freeware .NET Framework SDK. Mono also includes a command-line VB.NET compiler. The most recent version is VB 2012, which was released on August 15, 2012.">
<ChildContent>
<TabHeader Text="VB.Net"></TabHeader>
</ChildContent>
</TabItem>
</TabItems>
</SfTab>

@code {
public double ChangedValue = 0;
}*@

<style>
.tab_content .e-content .e-item {
font-size: 12px;
padding: 10px;
text-align: justify;
}
</style>
37 changes: 37 additions & 0 deletions Pages/_Host.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@page "/"
@namespace BlazorExample.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorExample</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>

<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>

<script src="_framework/blazor.server.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions Program.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;

namespace BlazorExample
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}

public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
}
27 changes: 27 additions & 0 deletions Properties/launchSettings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:58084",
"sslPort": 44336
}
},
"profiles": {
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"BlazorExample": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "https://localhost:5001;http://localhost:5000",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}
16 changes: 14 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,14 @@
# create-blazor-tab-component-in-blazor-server-app
A quick start blazor server app that allows you to organize multiple content in a compact space by using the Blazor Tabs component of Syncfusion.
# How to Add Syncfusion Blazor Tabs Component to a Blazor Server App

A quick overview on how to create and configure the Syncfusion Blazor Tabs component in a Blazor server app using Visual Studio 2019. The Blazor Tabs component is a content panel to show multiple contents in a compact space, one at a time. In this video, you will learn how to add a simple Blazor Tabs component to a Blazor server app. You will see how to change the tab header position as well as how to set styles to the active tab header. Finally, you will learn how to add contents using a template and how to set a display mode to the Blazor Tabs component.

Example: https://blazor.syncfusion.com/demos/tabs/default-functionalities

Documentation: https://blazor.syncfusion.com/documentation/tabs/getting-started

## Project pre-requisites
Make sure that you have the compatible versions of Visual Studio 2019 and .NET Core SDK latest version(3.1.2) in your machine before starting to work on this project.

## How to run this application?
To run this application, you need to first clone the create-blazor-tabs-component-in-blazor-server-app repository and then open it in Visual Studio 2019. Now, simply build and run your project to view the output.

Loading