Introdução ao Ignite UI for Blazor

    Este tópico fornece instruções passo a passo para criar aplicativos Blazor Server com Ignite UI for Blazor usando o Visual Studio.

    Create a New Blazor Server Project

    As etapas abaixo descrevem como criar um novo projeto Blazor Server. Se você quiser adicionar Ignite UI for Blazor a um aplicativo existente, vá para a seção Install Ignite UI for Blazor Package.

    Inicie o Visual Studio 2022 e clique em Criar um novo projeto na página inicial, selecione o modelo Blazor Server App e clique em Avançar.

    Forneça um nome e local para o projeto e clique em Avançar

    Especifique opções adicionais do projeto e clique em Criar

    Install Ignite UI for Blazor

    Ignite UI for Blazor é entregue por meio de pacotes NuGet. Para usar os componentes Ignite UI for Blazor em seus aplicativos Blazor, você deve primeiro instalar os pacotes NuGet apropriados.

    No Visual Studio, abra o gerenciador de pacotes NuGet selecionando Tools → NuGet Package Manager → Manage NuGet Packages for Solution. Procure e instale o pacote IgniteUI.Blazor NuGet.

    Para obter mais informações sobre como instalar Ignite UI for Blazor usando o NuGet, leia o tópico Instalando Ignite UI for Blazor.

    Register Ignite UI for Blazor

    .NET 6 and Later Applications

    1 - Abra o arquivo Program.cs e registre o Ignite UI for Blazor Service chamando a função builder.Services.AddIgniteUIBlazor:

    var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

builder.Services.AddIgniteUIBlazor();

var app = builder.Build();

    2 - Adicione o namespace IgniteUI.Blazor.Controls no arquivo_Imports.razor:

    @using IgniteUI.Blazor.Controls

    3a - Adicione a Folha de Estilo no elemento <head> do arquivo Pages/_Layout.cshtml ou Pages/_Host.cshtml:

    <head>
    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

    3b - Adicionar referências de script:

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.server.js"></script>

    .NET 5 Applications

    1 - Abra o arquivo Startup.cs e registre o Ignite UI for Blazor Service chamando services.AddIgniteUIBlazor():

    public void ConfigureServices(IServiceCollection services)
{
    // ...
    services.AddIgniteUIBlazor();
}

    2 - Adicione o namespace IgniteUI.Blazor.Controls no arquivo_Imports.razor:

    @using IgniteUI.Blazor.Controls

    3a - Adicione a Folha de Estilo no elemento <head> do arquivo Pages/_Host.cshtml:

    <head>
    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

    3b - Adicione referência de script ao arquivo Pages/_Host.cshtml:

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
<script src="_framework/blazor.server.js"></script>

    Add Ignite UI for Blazor Component

    Adicione um componente Ignite UI for Blazor à sua página do Razor:

    <IgbCard style="width:350px">
    <IgbCardMedia>
        <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
    </IgbCardMedia>
    <IgbCardHeader>
        <h4>Jane Doe</h4>
        <h6>Professional Photographer</h6>
    </IgbCardHeader>
    <IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
        Photography is a way of feeling, of touching,
        of loving. What you have caught on film is captured forever...
        it remembers little things, long after you have
        forgotten everything.</IgbCardContent>
    <IgbCardActions>
        <IgbButton>More Info</IgbButton>
    </IgbCardActions>
</IgbCard>

    Crie e execute o aplicativo Blazor.