Smart.Blazor
8.1.0
See the version list below for details.
dotnet add package Smart.Blazor --version 8.1.0
NuGet\Install-Package Smart.Blazor -Version 8.1.0
<PackageReference Include="Smart.Blazor" Version="8.1.0" />
paket add Smart.Blazor --version 8.1.0
#r "nuget: Smart.Blazor, 8.1.0"
// Install Smart.Blazor as a Cake Addin #addin nuget:?package=Smart.Blazor&version=8.1.0 // Install Smart.Blazor as a Cake Tool #tool nuget:?package=Smart.Blazor&version=8.1.0
Smart.Blazor Component Library
Smart Blazor Components is a commercial set of 60+ Blazor UI controls. Both server-side and client-side.
Getting Started
Installation
Smart.Blazor Components are distributed as the Smart.Blazor Nuget package. You can use any of the following options:
- Install the package from command line by running dotnet add package Smart.Blazor.
- Alternatively, you can add the project from the Visual Nuget Package Manager.
- Edit the .csproj file and add a project reference
Import the Smart.Blazor namespace.
Open the _Imports.razor file of your Blazor application and add @using Smart.Blazor
Set a Theme
Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include a theme CSS file by adding this snippet <link rel="stylesheet" href="_content/Smart.Blazor/source/smart.default.css"> You can include 14+ additional CSS themes for the Controls.
Source files
Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include this snippet
<script src="\_content/Smart.Blazor/smart.blazor.js"></script>
<script src="\_content/Smart.Blazor/smart.elements.js"></script>
Registrations
Blazor WebAssembly
This step is mandatory for Blazor WebAssembly(client-side) and also for ASP.NET Core hosted project types. You should place the code into the Program.cs of your client project
// other usings
using Smart.Blazor;
public class Program
{
public static async Task Main( string\[\] args )
{
var builder = WebAssemblyHostBuilder.CreateDefault( args );
builder.Services
.AddSmart()
.AddBootstrapProviders()
.AddFontAwesomeIcons();
builder.Services.AddSingleton( new HttpClient
{
BaseAddress = new Uri( builder.HostEnvironment.BaseAddress )
} );
builder.RootComponents.Add<App>( "app" );
var host = builder.Build();
host.Services
.UseBootstrapProviders()
.UseFontAwesomeIcons();
await host.RunAsync();
}
}
Blazor Server
This step is going only into the Startup.cs of your Blazor Server project.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Smart.Blazor;
namespace Smart.Blazor.Demos
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddSingleton<RandomDataService>();
// Set your license key here.
Smart.Blazor.License.Key = "Your License Key";
services.AddSmart();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/\_Host");
});
}
}
}
Using Smart.Blazor Components
Use any Smart Blazor component by typing its tag name in a Blazor page e.g. <Button>Click Me</Button> If you are using client-side WebAssembly Blazor also add the following code to your .csproj file (after the closing RazorLangVersion element): <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
Data binding a property
<Input Value="@text"></Input>
@code {
string text = " Hi from Smart!";
}
Events Handing
<Calendar id="calendar" OnChange=@OnChange></Calendar>
<div class="options">
<div class="caption">Events</div>
<div class="option" id="log">
@eventLog
</div>
</div>
@code {
private string eventLog;
private void OnChange(Event eventObj)
{
CalendarChangeEventDetail detail = eventObj\[" Detail & quot;\];
eventLog = detail.Value\[0\].ToString();
}
}
Alternatively you can do that:
@page "/calendar"
<Calendar OnReady="OnReady" id="calendar" ></Calendar>
<div class="options">
<div class="caption">Events</div>
<div class="option" id="log">
@eventLog
</div>
</div>
@code {
private string eventLog;
private void OnReady(Calendar calendar)
{
calendar.Changed += delegate (object sender, CalendarChangedEventArgs args)
{
string value = args.Value\[0\].ToString();
eventLog = value;
StateHasChanged();
};
}
}
OnReady
callback is called for each Blazor component, after it is initialized and rendered.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp3.1 is compatible. |
-
.NETCoreApp 3.1
- Microsoft.AspNetCore.Components.Web (>= 3.1.8)
- Microsoft.AspNetCore.Http (>= 2.2.2)
- Microsoft.CSharp (>= 4.5.0)
- Newtonsoft.Json (>= 12.0.1)
-
.NETStandard 2.1
- Microsoft.AspNetCore.Components.Web (>= 3.1.8)
- Microsoft.CSharp (>= 4.5.0)
- Newtonsoft.Json (>= 12.0.1)
-
net5.0
- Microsoft.AspNetCore.Components.WebAssembly (>= 5.0.0-rc.1.20451.17)
- Microsoft.AspNetCore.Http (>= 2.2.2)
- Microsoft.CSharp (>= 4.5.0)
- Newtonsoft.Json (>= 12.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
20.0.4 | 358 | 9/9/2024 |
19.0.5 | 2,179 | 4/25/2024 |
18.0.6 | 3,263 | 1/19/2024 |
18.0.0 | 869 | 1/16/2024 |
17.0.89 | 783 | 1/16/2024 |
17.0.35 | 1,434 | 12/1/2023 |
17.0.6 | 2,532 | 10/26/2023 |
16.0.2 | 5,138 | 8/4/2023 |
15.2.1 | 3,405 | 5/17/2023 |
15.1.1 | 3,041 | 4/1/2023 |
15.1.0 | 1,903 | 3/31/2023 |
15.0.63 | 2,284 | 3/20/2023 |
15.0.60 | 1,896 | 3/31/2023 |
14.4.136 | 3,599 | 1/18/2023 |
14.4.39 | 3,731 | 10/28/2022 |
14.2.18 | 4,598 | 7/21/2022 |
14.2.12 | 2,059 | 7/18/2022 |
14.1.1 | 2,833 | 7/5/2022 |
14.1.0 | 2,063 | 7/5/2022 |
14.0.94 | 2,345 | 6/15/2022 |
14.0.75 | 2,392 | 6/3/2022 |
14.0.51 | 3,327 | 5/17/2022 |
14.0.45 | 2,228 | 5/14/2022 |
13.1.29 | 3,482 | 4/7/2022 |
13.1.27 | 2,105 | 4/5/2022 |
13.1.25 | 2,130 | 4/4/2022 |
13.1.21 | 2,212 | 4/2/2022 |
13.1.20 | 1,782 | 4/1/2022 |
13.1.17 | 2,060 | 3/31/2022 |
13.1.12 | 1,904 | 3/29/2022 |
13.1.2 | 2,135 | 3/23/2022 |
13.0.20 | 2,039 | 3/8/2022 |
13.0.10 | 1,913 | 2/22/2022 |
13.0.8 | 2,068 | 2/21/2022 |
12.0.35 | 2,064 | 2/15/2022 |
12.0.20 | 1,876 | 2/4/2022 |
12.0.8 | 3,157 | 1/24/2022 |
12.0.1 | 1,947 | 1/20/2022 |
11.0.46 | 1,952 | 1/4/2022 |
11.0.38 | 1,765 | 12/29/2021 |
11.0.36 | 1,711 | 12/29/2021 |
11.0.35 | 1,764 | 12/29/2021 |
11.0.16 | 1,929 | 12/9/2021 |
11.0.7 | 1,851 | 12/3/2021 |
11.0.6 | 2,389 | 12/3/2021 |
11.0.4 | 1,729 | 12/2/2021 |
11.0.3 | 1,723 | 12/2/2021 |
11.0.0 | 1,732 | 11/29/2021 |
10.2.2 | 4,464 | 10/19/2021 |
10.2.1 | 1,718 | 10/19/2021 |
10.2.0 | 1,798 | 10/19/2021 |
10.0.83 | 1,827 | 10/18/2021 |
10.0.81 | 1,793 | 10/17/2021 |
10.0.77 | 1,844 | 10/14/2021 |
10.0.74 | 1,738 | 10/13/2021 |
10.0.73 | 1,711 | 10/13/2021 |
10.0.48 | 2,095 | 9/29/2021 |
10.0.45 | 1,728 | 9/27/2021 |
10.0.44 | 1,781 | 9/26/2021 |
10.0.41 | 1,725 | 9/23/2021 |
10.0.37 | 1,706 | 9/22/2021 |
10.0.36 | 1,823 | 9/22/2021 |
10.0.35 | 1,732 | 9/22/2021 |
10.0.31 | 1,912 | 9/17/2021 |
10.0.18 | 1,873 | 8/27/2021 |
10.0.15 | 1,708 | 8/26/2021 |
10.0.14 | 1,755 | 8/24/2021 |
10.0.1 | 1,911 | 8/16/2021 |
9.4.18 | 2,041 | 7/28/2021 |
9.4.15 | 1,749 | 7/16/2021 |
9.4.13 | 1,837 | 7/15/2021 |
9.4.8 | 1,643 | 7/12/2021 |
9.4.1 | 1,894 | 7/5/2021 |
9.4.0 | 1,945 | 6/30/2021 |
9.3.115 | 1,868 | 7/2/2021 |
9.3.113 | 1,789 | 6/25/2021 |
9.3.108 | 1,823 | 6/21/2021 |
9.3.97 | 1,745 | 6/8/2021 |
9.3.92 | 1,860 | 6/3/2021 |
9.3.82 | 1,822 | 5/26/2021 |
9.3.80 | 1,798 | 5/26/2021 |
9.3.66 | 1,751 | 5/19/2021 |
9.3.54 | 1,837 | 5/10/2021 |
9.3.45 | 1,976 | 5/6/2021 |
9.3.42 | 4,757 | 5/5/2021 |
9.3.39 | 1,985 | 5/1/2021 |
9.3.38 | 1,749 | 4/30/2021 |
9.3.36 | 1,721 | 4/30/2021 |
9.3.35 | 1,882 | 4/30/2021 |
9.3.34 | 1,861 | 4/29/2021 |
9.3.33 | 1,821 | 4/29/2021 |
9.3.32 | 1,756 | 4/28/2021 |
9.3.31 | 1,763 | 4/28/2021 |
9.3.30 | 1,922 | 4/27/2021 |
9.3.29 | 1,713 | 4/27/2021 |
9.3.25 | 1,656 | 4/26/2021 |
9.3.23 | 1,772 | 4/24/2021 |
9.3.22 | 1,776 | 4/23/2021 |
9.3.21 | 1,780 | 4/23/2021 |
9.3.20 | 1,738 | 4/22/2021 |
9.3.19 | 1,734 | 4/22/2021 |
9.3.18 | 1,757 | 4/22/2021 |
9.3.17 | 1,776 | 4/22/2021 |
9.3.16 | 1,717 | 4/22/2021 |
9.3.15 | 1,745 | 4/22/2021 |
9.3.14 | 1,832 | 4/22/2021 |
9.3.12 | 1,849 | 4/22/2021 |
9.3.11 | 1,788 | 4/21/2021 |
9.3.10 | 1,721 | 4/21/2021 |
9.3.9 | 1,850 | 4/21/2021 |
9.3.8 | 1,775 | 4/20/2021 |
9.3.6 | 1,857 | 4/20/2021 |
9.3.5 | 1,850 | 4/20/2021 |
9.3.4 | 1,786 | 4/19/2021 |
9.3.3 | 1,788 | 4/18/2021 |
9.3.2 | 1,774 | 4/17/2021 |
9.2.7 | 1,861 | 4/17/2021 |
9.2.5 | 1,760 | 4/16/2021 |
9.2.2 | 1,689 | 4/15/2021 |
9.2.1 | 1,828 | 4/13/2021 |
9.2.0 | 1,885 | 4/10/2021 |
9.1.6 | 1,734 | 4/7/2021 |
9.1.5 | 1,973 | 3/25/2021 |
9.1.4 | 1,986 | 3/5/2021 |
9.1.3 | 2,044 | 2/26/2021 |
9.1.1 | 2,078 | 2/3/2021 |
9.1.0 | 1,922 | 2/3/2021 |
9.0.6 | 1,945 | 2/2/2021 |
9.0.5 | 1,929 | 1/15/2021 |
9.0.4 | 2,047 | 1/14/2021 |
9.0.3 | 1,933 | 1/11/2021 |
9.0.2 | 2,125 | 12/27/2020 |
9.0.1 | 2,140 | 12/27/2020 |
9.0.0 | 2,001 | 12/27/2020 |
8.2.0 | 3,493 | 12/22/2020 |
8.1.17 | 2,097 | 12/9/2020 |
8.1.14 | 1,965 | 12/8/2020 |
8.1.13 | 2,086 | 12/2/2020 |
8.1.12 | 2,017 | 11/26/2020 |
8.1.10 | 2,102 | 11/25/2020 |
8.1.9 | 1,979 | 11/25/2020 |
8.1.8 | 1,958 | 11/24/2020 |
8.1.7 | 2,113 | 11/5/2020 |
8.1.6 | 1,957 | 11/3/2020 |
8.1.5 | 2,081 | 11/1/2020 |
8.1.4 | 2,009 | 10/29/2020 |
8.1.3 | 1,949 | 10/13/2020 |
8.1.2 | 274 | 10/13/2020 |
8.1.1 | 255 | 10/13/2020 |
8.1.0 | 358 | 10/13/2020 |