Visão geral da gaveta de navegação Blazor

    O Ignite UI for Blazor Navigation Drawer fornece navegação lateral que pode ser expandida ou recolhida dentro do conteúdo. Uma versão mini fornece acesso rápido à navegação mesmo quando fechada. Seu conteúdo é completamente personalizável, ao mesmo tempo em que fornece estilo de item de menu padrão.

    Blazor Navigation Drawer Example

    Este exemplo demonstra como criarIgbNavDrawer componentes.

    Usage

    Antes de usá-losIgbNavDrawer, você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbNavDrawerModule),
  typeof(IgbNavDrawerHeaderItemModule)
);

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbNavDrawer componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

    Para uma introdução completa ao Ignite UI for Blazor, leia o tópico Comecando.

    Adding Navigation Drawer Items

    A maneira mais simples de começar a usar oIgbNavDrawer é a seguinte:

    <IgbNavDrawer Open="true">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@HomeIcon" slot="icon" IconName="home" Collection="material"></IgbIcon>
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@SearchIcon" slot="icon" IconName="search" Collection="material"></IgbIcon>
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
</IgbNavDrawer>

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    Embora qualquer conteúdo possa ser fornecido na gaveta, eleIgbNavDrawerItem está disponível para aplicar um estilo pronto para uso nos itens.

    Para aprimorar um pouco nosso componente, podemos usá-lo em conjunto com oIgbNavbar. Dessa forma, podemos alcançar um visual mais completo e usar os métodos do desenhador. Vamos ver como podemos usar isso no próximo exemplo:

    <IgbNavbar>
    <IgbIcon slot="start" IconName="menu" Collection="material" />
    <h2>Home</h2>
</IgbNavbar>

<IgbNavDrawer @ref="NavDrawerRef">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon slot="icon" IconName="home" Collection="material" />
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon slot="icon" IconName="search" Collection="material" @onclick="OnMenuIconClick" />
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
</IgbNavDrawer>

    Vamos também adicionar alguns botões de acesso para exibir todosposition os valores. Assim, sempre que um for selecionado, mudamos a posição da gaveta.

    <IgbRadioGroup id="radio-group" Alignment="ContentOrientation.Horizontal">
    <IgbRadio Value="Start" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioOptionClick">Start</IgbRadio>
    <IgbRadio Value="End" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">End</IgbRadio>
    <IgbRadio Value="Top" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Top</IgbRadio>
    <IgbRadio Value="Bottom" LabelPosition="RadioLabelPosition.After" Change="OnRadioOptionClick">Bottom</IgbRadio>
</IgbRadioGroup>

@code {

    public IgbNavDrawer NavDrawerRef { get; set; }

    public void OnRadioOptionClick(IgbComponentBoolValueChangedEventArgs args)
    {
        IgbRadio radio = args.Parent as IgbRadio;

        if (this.NavDrawerRef != null)
        {
            switch (radio.Value)
            {
                case "Start":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Start;
                        break;
                    }
                case "End":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.End;
                        break;
                    }
                case "Top":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Top;
                        break;
                    }
                case "Bottom":
                    {
                        this.NavDrawerRef.Position = NavDrawerPosition.Bottom;
                        break;
                    }
            }
        }
    }
}

    E, finalmente, precisamos de uma maneira de abrir e fechar nossa gaveta de navegação. Há algumas maneiras de fazer isso, mas para o propósito deste exemplo, faremos o seguinte:

    public void OnMenuIconClick()
{
    if (this.NavDrawerRef != null)
    {
        this.NavDrawerRef.Show();
    }
}

    Se tudo correr bem, seu componente deverá ficar assim:

    Mini Variant

    Com a versão mini, a Gaveta de Navegação muda sua largura em vez de fechar. Ele é usado para manter uma navegação rápida, disponível o tempo todo, deixando apenas os ícones. Para isso, basta configurar amini ranhura da gaveta.

    <IgbNavDrawer @ref="@NavDrawerRef" Open="true" style="position: relative">
    <IgbNavDrawerHeaderItem>
        Sample Drawer
    </IgbNavDrawerHeaderItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@HomeIcon" slot="icon" Collection="material" IconName="home" />
        <span slot="content">Home</span>
    </IgbNavDrawerItem>
    <IgbNavDrawerItem>
        <IgbIcon @ref="@SearchIcon" slot="icon" Collection="material" IconName="search" />
        <span slot="content">Search</span>
    </IgbNavDrawerItem>
    <div slot="mini">
        <IgbNavDrawerItem>
            <IgbIcon slot="icon" Collection="material" IconName="home" />
        </IgbNavDrawerItem>
        <IgbNavDrawerItem>
            <IgbIcon slot="icon" Collection="material" IconName="search" />
        </IgbNavDrawerItem>
    </div>
</IgbNavDrawer>

    E aqui está o resultado:

    Styling

    EleIgbNavDrawer expõe várias partes do CSS -base,main, emini, dando controle total sobre o estilo deles.

    igc-nav-drawer::part(base) {
  background: var(--ig-secondary-500);
}

igc-nav-drawer-item::part(base) {
  color: var(--ig-secondary-500-contrast);
}

igc-nav-drawer-item::part(base):hover {
  background-color: var(--ig-gray-800);
}

igc-nav-drawer-item[active]::part(base) {
  background: var(--ig-warn-500);
  color: var(--ig-warn-500-contrast);
}

igc-nav-drawer-header-item {
  color: var(--ig-warn-500);
}

    API References

    Additional Resources