Blazor.Sidepanel

Trasero

Avance

Instalación

 Install-Package Append.Blazor.Sidepanel

Manifestación

Existe una carpeta de aplicación de muestra en /docs que también se aloja como documentación.

Uso

Agregar ISidepanelService a través de DI en Program.cs

 builder . Services . AddSidepanel ( ) ;

Agregar a _Imports.razor

 @using Append . Blazor . Sidepanel

Agregar a MainLayout.razor

 < Sidepanel / >

Inyectar en componentes/páginas

 @inject ISidepanelService Sidepanel

Apertura y cierre

Básico

 Sidepanel . Open < Counter > ( "Counter" , "example" ) ;
Sidepanel . Close ( ) ;

Con componente

< SidepanelComponent Title = " Your Title " SubTitle = " Optional Subtitle " @ref = " sidepanel " >
    < div >Some inner content</ div >
</ SidepanelComponent >

@code
{
    private SidepanelComponent sidepanel ;
    private void Open ()
    {
        sidepanel . Open ();
    }

    private void Close ()
    {
        sidepanel . Close ();
    }
} 

Avanzado con 1 parámetro

El parámetro debe configurarse en el contador componente

 private int increaseBy = 10 ;
private void OpenCounterWithParameter ( )
{
    Sidepanel . Open < Counter > ( "Counter" , "example" , ( nameof ( increaseBy ) , increaseBy ) ) ;
} 

Avanzado con múltiples parámetros

Los parámetros deben configurarse en el contador componente

 private void OpenCounterWithParameters ( )
{
    var parameters = new Dictionary < string , object > { 
        { ( nameof ( increaseBy ) ) , increaseBy } ,
        { ( nameof ( initialValue ) ) , initialValue }
    } ;
    Sidepanel . Open < Counter > ( "Counter" , "Example" , parameters ) ;
} 

Anular el estilo

En App.css

 # sidepanel . is-open {
    width : 80 % ;
}

@ @media ( min-width : 768 px ) {
    # sidepanel . is-open {
        width : 50 % ;
    }
}

Contribuciones y comentarios

No dude en usar el componente, abrir problemas, solucionar errores o proporcionar comentarios.

Colaboradores

Este proyecto es creado y mantenido por:

• Benjamin Verttonghen