Mudblazor .NET 8 (Como funciona para desenvolvedores)

Configurando o MudBlazor em projetos .NET

Para usar o MudBlazor em seu projeto cliente ou projeto servidor, primeiro certifique-se de ter o .NET Framework instalado. Em seguida, crie um novo projeto Blazor na pasta de layout do cliente ou na pasta de layout do servidor, dependendo do seu modelo de hospedagem. Utilize a linha de comando ou o Visual Studio para isso. No Visual Studio, escolha o modelo de aplicativo Blazor .

Em seguida, adicione o MudBlazor ao seu projeto. Abra o terminal ou o Console do Gerenciador de Pacotes e execute o comando:

Install-Package MudBlazor

Este comando adiciona o MudBlazor ao seu projeto.

Após instalar o MudBlazor, acesse _Imports.razor. Adicione o seguinte:

@using MudBlazor

Isso torna os componentes do MudBlazor disponíveis em seu projeto.

Em wwwroot/index.html (ou Host.cshtml para projetos de servidor), adicione o CSS e o JS do MudBlazor ao mesmo arquivo, garantindo que o modo de renderização interativo com as configurações de modelo padrão seja compatível. Inclua a seguinte linha:

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Além disso, adicione:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Esta etapa garante que os estilos e funcionalidades do MudBlazor funcionem corretamente no seu aplicativo.

Exemplo de código básico: Criando um botão simples no MudBlazor

Para demonstrar o MudBlazor em ação, vamos adicionar um botão simples a um componente. Abra um arquivo de componente Razor , como Index.razor. Adicione o seguinte código de botão do MudBlazor:

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Este código inicia a criação de um botão que diz "Clique aqui". Ao ser clicado, ele registra uma mensagem no console, demonstrando a renderização do lado do servidor. As propriedades Variant e Color personalizam a aparência do botão.

Diálogos em MudBlazor

O componente de diálogo do MudBlazor simplifica a criação e o gerenciamento de diálogos. Primeiro, injete o IDialogService em seu componente:

@inject IDialogService DialogService

Em seguida, utilize o seguinte método para abrir uma caixa de diálogo:

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

MyDialog é um componente Razor que representa o conteúdo da caixa de diálogo. Você pode passar parâmetros com DialogParameters.

Grade de dados

O MudBlazor oferece um componente de grade de dados para exibir coleções. Suporta classificação, paginação e filtragem. Para usá-lo, vincule uma coleção à propriedade Items:

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

Formulários de entrada

Para entrada de formulários, o MudBlazor fornece vários componentes. Aqui está um exemplo usando MudTextField:

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

Abas

Para organizar o conteúdo com abas, use MudTabs. Defina cada aba com MudTabPanel:

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

Ícones

O MudBlazor integra-se com o Material Icons. Para usar um ícone, adicione um componente MudIcon:

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

Este código exibe um ícone de alarme. Os ícones aprimoram as interfaces do usuário, fornecendo pistas visuais.

Caso de uso da integração do IronPDF com o C# MudBlazor

MudBlazor é uma biblioteca de componentes para Blazor, repleta de widgets e ferramentas úteis para a criação de interfaces de usuário responsivas e interativas. Ao combinar os recursos de interface do usuário do MudBlazor com a geração de PDFs do IronPDF, você obtém um conjunto de ferramentas poderoso. Um caso de uso comum seria um aplicativo web que permite aos usuários criar documentos ou relatórios usando componentes do MudBlazor e, em seguida, com um clique, converter esses designs em PDFs para download usando o IronPDF.

Exemplo de código de caso de uso

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />

    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub