Cajón de navegación Blazor

La Ignite UI for Blazor Navigation Drawer proporciona navegación lateral que se puede expandir o contraer dentro del contenido. Una versión mini proporciona acceso rápido a la navegación incluso cuando está cerrada. Su contenido es completamente personalizable y al mismo tiempo proporciona un estilo predeterminado para los elementos del menú.

Este ejemplo demuestra cómo crear el componente IgbNavDrawer.

Usage

Antes de utilizar IgbNavDrawer, debe registrarlo de la siguiente manera:

// in Program.cs file

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

También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbNavDrawer. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

Para obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.

La forma más sencilla de empezar a utilizar IgbNavDrawer es la siguiente:

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

Si todo ha ido bien deberías ver lo siguiente en tu navegador:

Si bien se puede proporcionar cualquier contenido en el cajón, IgbNavDrawerItem está disponible para aplicar estilos listos para usar a los elementos.

Para mejorar un poco nuestro componente, podemos usarlo junto con IgbNavbar. De esta forma podemos conseguir un look más completo y utilizar los métodos del cajón. Veamos cómo podemos usar esto en el siguiente ejemplo:

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

También agreguemos algunos botones de opción para mostrar todos los valores position. De esta manera cada vez que seleccionemos uno cambiaremos la posición del cajón.

<IgbRadioGroup id="radio-group" Alignment="RadioGroupAlignment.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;
                    }
            }
        }
    }
}

Y finalmente, necesitamos una forma de abrir y cerrar nuestro cajón de navegación. Hay un par de formas de lograr esto, pero para este ejemplo haremos lo siguiente:

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

Si todo va bien, su componente debería verse así:

Mini Variant

Con la variante mini, el cajón de navegación cambia su ancho en lugar de cerrarse. Sirve para mantener una navegación rápida, disponible en todo momento, dejando sólo los iconos. Para lograrlo, sólo necesitas configurar la mini ranura del cajón.

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

Y aquí está el resultado:

El componente del cajón de navegación expone varias partes CSS: base, main y mini. El componente del elemento del cajón de navegación también expone tres partes CSS: base, icon y content, lo que le brinda control total sobre su estilo.

igc-nav-drawer::part(base) {
    background: #2d313a;
}

igc-nav-drawer-item::part(base) {
    color: #fff;
}

igc-nav-drawer-item::part(base):hover {
    background-color: #3D4149;
}

igc-nav-drawer-item[active]::part(base) {
    background: #f3c03e;
    color: #2c2c2c
}

igc-nav-drawer-header-item {
    color: #f3c03e
}

Descripción general del cajón de navegación Blazor

Blazor Navigation Drawer Example

Usage

Adding Navigation Drawer Items

Navbar Integration

Mini Variant

Styling the Navigation Drawer

API References

Additional Resources