Blazor

Esse blog é dedicado a explorar as funcionalidades do Blazor. Abaixo segue a lista de artigos em uma ordem sugerida de leitura.

  1. Introdução
  2. Criando um Projeto com o Visual Studio 2019
  3. Criando um Projeto com o VSCode
  4. Iniciando e Configurando
  5. WebAssembly
  6. Rotas
  7. Injeção de Dependência
  8. Componentes Blazor
  9. Parâmetros nos Componentes
  10. ChildContent
  11. DataBinding
  12. Eventos
  13. JavaScript Interop
  14. SetFocus
  15. LocalStorage
  16. HttpClient
  17. Navegação
  18. Layouts
  19. _Imports.razor
  20. EventCallback
  21. Referências de Componentes
  22. Lifecycle Methods
  23. Diretivas
  24. Atributos Condicionais
  25. MarkupString
  26. code-behind
  27. Importando Componentes
  28. Templated Components
  29. Componentes Genéricos
  30. Templates Razor
  31. Cascading values and parameters
  32. Criando um Componente de Tabs
  33. Introdução aos Forms
  34. DataAnnotations no Blazor
  35. Validação de Forms
  36. Mensagens de Erro de Validação
  37. ValidationMessage no EditForm
  38. Inputs do EditForm
  39. Usando Enum como DropDownList
  40. Loading de Inicialização
  41. CultureInfo
  42. awesome-blazor
  43. OneWay e TwoWay DataBinding
  44. Bind OnInput
  45. JavaScript Interop síncrono
  46. Recuperando Linguagem do Browser
  47. BlazorStrap

BlazorStrap

Vou dedicar esse artigo para falar um pouco sobre uma biblioteca Blazor, que me chamou muito atenção, é o BlazorStrap.

BlazorStrap é uma biblioteca Blazor, distribuída através de um pacote nuget. Como o próprio nome sugere, o BlazorStrap é um conjunto de componentes do Bootstrap, portados para o Blazor.

Para instalar o BlazorStrap basta clicar com o botão direito na opção Dependencies do seu projeto na Solution Explorer, e clicar em Manage Nuget Packages.

Em seguida, como mostra a Figura 1, procure pelo pacote BlazorStrap e clique em Install.

Figura 1: instalando pacote nuget do BlazorStrap

Note que, assim como o próprio Blazor, o BlazorStrap também está em versão preview. E para que você possa encontra-lo no nuget, é preciso marcar a opção Include prerelease, destacada na Figura 1.

Após a instalação, como você pode ver na Figura 2, a DLL do BlazorStrap é referenciada no projeto.

Figura 2: DLL do BlazorStrap referenciada no projeto

O BlazorStrap é um projeto Open Source, com o código disponível no github, hospedado no seguinte repositório: https://github.com/chanan/BlazorStrap. E esse repositório é mantido pelo Chanan Braunstein.

Você pode explorar todas os componentes já disponíveis no BlazorStrap, através da página de documentação do projeto: https://chanan.github.io/BlazorStrap/.

Como você pode ver na Figura 3, a documentação é muito parecida com a do próprio Bootstrap, e incluí exemplos práticos de como você pode usar cada um dos componentes.

Figura 3: Exemplo da documentação do BlazorStrap

Alert

Não vamos conseguir ver todos os componentes do BlazorStrap nesse artigo, mas para testar o seu funcionamento, vamos brincar um pouco com o componente Alert.

Veja na Figura 4 um exemplo bem simples de como usar esse componente.

Figura 4: Exemplo do uso do componente Alert

Como você pode ver, a primeira coisa a fazer para usar os componentes do BlazorStrap, é importar o namespace BlazorStrap no seu componente.

Se a sua ideia é usar o BlazorStrap em toda a sua aplicação, você pode adicionar esse using no arquivo _Imports.razor.

Observe que o componente leva o nome Alert e possuí um parâmetro chamado Color. Esse parâmetro recebe um enum, do próprio BlazorStrap.

Note que estamos criando três Alerts de cores diferentes para fazer o nosso teste. Execute o seu projeto e veja o resultado, como mostra a Figura 5.

Figura 5: Testando o componente Alert

Além de ser uma excelente opção para quem quer criar aplicações Blazor com Bootstrap, o BlazorStrap é uma prova de como o Blazor tem um potencial enorme de componentização.

Meus parabéns ao Chanan Braunstein pela iniciativa, e espero que esse projeto tenha muitas contribuições para se manter ativo e relevante nesse novo ecossistema que está surgindo com o Blazor.

Vou dedicar outros artigos nesse Blog, para explorar e testar outros componentes do BlazorStrap. Fique atento.

Grande Abraço é até o próximo!