Blazor.Sidepanel

Sidepanel

Pratinjau

Instalasi

 Install-Package Append.Blazor.Sidepanel

Demo

Ada folder aplikasi sampel di /Docs yang juga di -host sebagai dokumentasi.

Penggunaan

Tambahkan ISidepanelService melalui DI di Program.cs

 builder . Services . AddSidepanel ( ) ;

Tambahkan ke _Imports.razor

 @using Append . Blazor . Sidepanel

Tambahkan ke MainLayout.razor

 < Sidepanel / >

Menyuntikkan ke dalam komponen/halaman

 @inject ISidepanelService Sidepanel

Pembukaan dan penutupan

Dasar

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

Dengan komponen

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

Advanced dengan 1 parameter

Parameter harus diatur dalam komponen penghitung

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

Maju dengan beberapa parameter

Parameter harus diatur dalam komponen penghitung

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

Mengesampingkan gaya

Di app.css

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

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

Kontribusi dan umpan balik

Silakan menggunakan komponen, membuka masalah, memperbaiki bug, atau memberikan umpan balik.

Kontributor

Proyek ini dibuat dan dikelola oleh:

• Benjamin Vertonghen