Blazor -  Componentes Bootstrap (Blazorise)


Hoje veremos como usar a biblioteca de componentes Blazorize que oferece uma biblioteca de componentes front-end.

O Blazorise é uma biblioteca de componentes de interface do usuário criada sobre framework Blazor, e frameworks  CSS como Bootstrap, Bulma ou Material.

O Blazorise tem dois princípios fundamentais:

Ele fornece um conjunto de componentes que você pode usar para criar facilmente um aplicativo SPA. Dessa forma, você pode economizar tempo e não precisa sair criando sua própria biblioteca de componentes.

Basta importar o Blazorise via Nuget , fazer a configuração, e, começar a criar...

A página oficial do Blazorise com a documentação pode ser acessada aqui : https://blazorise.com/docs/

O Blazorise foi projetado para funcionar com diferentes frameworks CSS. Cada framework CSS suportado é definida por um pacote nuget diferente.

Neste artigo eu vou focar na implementação para o Bootstrap e por isso vou usar os seguintes pacotes:

Para ver um demo dos recursos da biblioteca aplicados a cada um dos frameworks acesse:

Então vamos usar alguns recursos do Blazorise na prática...

Recursos usados:

Criando o projeto Blazor Server no VS Community 2019

bra o VS 2019 Community (versão mínima 16.4) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_Bootstrap1, a localização e clique em Create;

A seguir teremos uma janela com duas opções :

  1. Blazor Server App
  2. Blazor WebAssembly App

Selecione a primeira opção - Blazor Server App. Não vamos usar autenticação e vamos habilitar o https.

Clique no botão Create para criar o projeto.

Antes de prosseguir vamos limpar o projeto excluindo os arquivos abaixo e suas referências:

Vamos também ajustar o arquivo NavMenu.razor deixando apenas a opção para exibir o componente Index.razor que iremos aproveitar.

Agora com o projeto criado e os ajustes feitos vamos precisar instalar as bibliotecas Blazorise.Bootstrap e Blazorise.Icons.FontAwesome.

Podemos usar a janela do Package Manager e digitar os comandos:

Ou usar a opção Manage Nuget Packages for Solution do menu Tools e na guia Browse selecionar os pacotes acima.

Com as bibliotecas instaladas podemos prosseguir.

Agora precisamos incluir os arquivos JavaScript e de Estilo usados em nosso projeto.

Abra o arquivo _Host.cshtml e inclua os arquivos CSS e JavaScript conforme abaixo:

1- Na seção <head> do arquivo _Host.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor_Bootstrap1</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <!-- Blazorize -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />

</head>

1- Dentro da seção body e depois da tag <app> do arquivo _Host.cshtml

<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>

    <!-- inside of body section and after the <app> tag  -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script src="_content/Blazorise/blazorise.js"></script>
    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>

    <script src="_framework/blazor.server.js"></script>
</body>

...

Nota: Quando o projeto Blazor é criado, ele também inclui seus próprios arquivos Bootstrap e FontAwesome que podem, em algum momento, ser de versões mais antigas. Para garantir que estamos usando os arquivos de auto-inicialização e FontAwesome apropriados, remova-os ou substitua-os pelos links acima. Se você esquecer de removê-los, é possível que alguns componentes não funcionem conforme o esperado.

Registrando o serviço

Agora precisamos registrar o serviço no ConfigureServices da classe Startup :

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddBlazorise(options =>
                  {
                      options.ChangeTextOnKeyPress = true; // optional
                  })
                  .AddBootstrapProviders()
                  .AddFontAwesomeIcons();

        }

No arquivo Configure() inclua a seguinte linha de código em azul :

       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
             ....
             ...
            app.UseRouting();
            app.ApplicationServices.UseBootstrapProviders().UseFontAwesomeIcons();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }

Agora podemos usar os recursos do Blazorize em nosso projeto.

Usando alguns recursos do Blazorize

Apresentar todos os recursos deste componente iria requerer mais de um artigo mas na página oficial - https://blazorise.com/docs/start/ - você pode acessar cada recurso com exemplos de código.

Como exemplo vou selecionar alguns dos recursos e incluir no componente Index.razor do projeto Blazor.

Abra o arquivo Index.razor e inclua o código abaixo:

@page "/"
<h3>Demo - Blazorize </h3>
@*//Text*@
<TextEdit MaskType="MaskType.RegEx" EditMask="^[a-zA-Z ]*$" Placeholder="EditMask (só letras)" />
@*//Select Grupos*@
<SelectEdit TValue="int">
    <SelectGroup Label="Grupo 1">
        <SelectItem Value="1">Opçao 1</SelectItem>
        <SelectItem Value="2">Opçao 2</SelectItem>
    </SelectGroup>
    <SelectGroup Label="Grupo 2">
        <SelectItem Value="3">Opçao 3</SelectItem>
        <SelectItem Value="4">Opçao 4</SelectItem>
    </SelectGroup>
</SelectEdit>
@*//Date*@
<DateEdit />
@*/Buttons*@
<Button Color="Color.Primary">Primary</Button>
<Button Color="Color.Secondary">Secondary</Button>
<Button Color="Color.Success">Success</Button>
<Button Color="Color.Warning">Warning</Button>
<Button Color="Color.Danger">Danger</Button>
<Button Color="Color.Info">Info</Button>
<Button Color="Color.Light">Light</Button>
<Button Color="Color.Dark">Dark</Button>
<Button>None</Button>
@*//Card*@
<Card>
    <CardImage Source="/images/doce4.jpg" Alt="Imagem no Card"> 
    </CardImage>
    <CardBody>
        <CardTitle Size="5">Exemplo de Card</CardTitle>
        <CardText>
            Texto de exemplo usado no Card
        </CardText>
        <Button Color="Color.Primary">Button</Button>
    </CardBody>
</Card>
@*//Tabs*@
<Tabs>
    <Tab Name="home" IsActive="true">Home</Tab>
    <Tab Name="profile">Perfil</Tab>
    <Tab Name="messages">Mensagem</Tab>
    <Tab Name="settings">Configuração</Tab>
</Tabs>
@*//Breadcrumb*@
<Breadcrumb>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <BreadcrumbLink To="#">Arquivos</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbItem IsActive="true">
        <BreadcrumbLink To="#">Emails</BreadcrumbLink>
    </BreadcrumbItem>
</Breadcrumb>
@*//Dropdown*@
<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Minha Opção</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Outra opção</DropdownItem>
    </DropdownMenu>
</Dropdown>
@*//Pagination*@
<Pagination>
    <PaginationItem>
        <PaginationLink>
            <span aria-hidden="true">«</span>
        </PaginationLink>
    </PaginationItem>
    <PaginationItem>
        <PaginationLink>
            1
        </PaginationLink>
    </PaginationItem>
    <PaginationItem>
        <PaginationLink>
            2
        </PaginationLink>
    </PaginationItem>
    <PaginationItem>
        <PaginationLink>
            3
        </PaginationLink>
    </PaginationItem>
    <PaginationItem>
        <PaginationLink>
            <span aria-hidden="true">»</span>
        </PaginationLink>
    </PaginationItem>
</Pagination>
@code{
}

O código usado foi copiado da página de documentação do componente.

Agora é só alegria...

Executando o projeto teremos o resultado abaixo:

Pegue o projeto aqui:  Blazor_Bootstrap1.zip (sem as referências)

"Sede, pois, imitadores de Deus, como filhos amados;
E andai em amor, como também Cristo vos amou, e se entregou a si mesmo por nós, em oferta e sacrifício a Deus, em cheiro suave."
Efésios 5:1,2

Referências:


José Carlos Macoratti