globalcode open4education€¦ · renato haddad [email protected] microsoft most valuable...
TRANSCRIPT
Globalcode – Open4education
Globalcode – Open4education
.NET
Globalcode – Open4education
Renato Haddad [email protected]
Microsoft Most Valuable Professional
Escritor, professor de pós graduação,
desenvolvedor .NET, Power BI e
velejador de Kitefoil
Blazorize: UI em apps Blazor
Globalcode – Open4education
Biblioteca de components para Blazor apps
Suporta Bootstrap, Bulma, Material CSS
O que é Blazorise?
Globalcode – Open4education
NUGET
Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Bulma
Install-Package Blazorise.Material
Icon package
Install-Package Blazorise.Icons.FontAwesome
Instalação
Globalcode – Open4education
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384…" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv…" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X…+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384…" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR…/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
Referências no HTML
Globalcode – Open4education
@addTagHelper *, Blazorise
@using Blazorise
Using no _ViewImports.cshtml
Globalcode – Open4education
using Blazorise;
using Blazorise.Bootstrap;
using Blazorise.Icons.FontAwesome;
public void ConfigureServices( IServiceCollection services ) {
services .AddBlazorise() // from v0.6.0-preview4
.AddBootstrapProviders()
.AddFontAwesomeIcons();
}
public void Configure( IComponentsApplicationBuilder app ) {
app .UseBootstrapProviders()
.UseFontAwesomeIcons();
app.AddComponent<App>( "app" ); }
Startup.cs
Globalcode – Open4education
<link href="blazorise.css" rel="stylesheet" />
<link href="blazorise.bootstrap.css" rel="stylesheet" />
<link href="blazorise.sidebar.css" rel="stylesheet" />
<link href="blazorise.snackbar.css" rel="stylesheet" />
<script src="blazorise.js"></script>
<script src="blazorise.bootstrap.js"></script>
<script src="blazorise.charts.js"></script>
<script src="blazorise.sidebar.js"></script>
Exemplo
Globalcode – Open4education
Blazorizehttps://blazor.net/community
Globalcode – Open4education
Docs: https://blazor.net
Code: https://github.com/aspnet/blazor
Mono: https://github.com/mono/mono
Community: https://blazor.net/community
Samples, libraries, courses, tooling, etc.
Additional resources
Globalcode – Open4education
OBRIGADO