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

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

    Ejemplo de cajón de navegación Blazor

    Este ejemplo demuestra cómo crear el componente IgbNavDrawer.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
      typeof(IgbNavDrawerModule),
      typeof(IgbNavDrawerHeaderItemModule)
    );
    razor

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

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

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

    Agregar elementos del cajón de navegació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>
    razor

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    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;
                        }
                }
            }
        }
    }
    razor

    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();
        }
    }
    razor

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Minivariante

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

    Y aquí está el resultado:

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Diseñar el cajón de navegación

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

    EXAMPLE
    MODULES
    RAZOR
    drawer-styling.css
    index.css

    Referencias de API

    Recursos adicionales