Blazor.Sidepanel

Sidepanel

Prévisualisation

Installation

 Install-Package Append.Blazor.Sidepanel

Démo

Il existe un exemple de dossier dans / docs qui est également hébergé en documentation.

Usage

Ajouter ISidepanelService via di in Program.cs

 builder . Services . AddSidepanel ( ) ;

Ajouter à _Imports.razor

 @using Append . Blazor . Sidepanel

Ajouter à MainLayout.razor

 < Sidepanel / >

Injecter dans les composants / pages

 @inject ISidepanelService Sidepanel

Ouverture et fermeture

Basique

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

Avec composant

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

Avancé avec 1 paramètre

Le paramètre doit être défini dans le compteur

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

Avancé avec plusieurs paramètres

Les paramètres doivent être définis dans le compteur

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

Style de remplacement

Dans app.css

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

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

Contributions et commentaires

N'hésitez pas à utiliser le composant, à ouvrir des problèmes, à corriger les bogues ou à fournir des commentaires.

Contributeurs

Ce projet est créé et entretenu par:

• Benjamin Vertonghen