Blazor.Sidepanel

Sidepanel

معاينة

تثبيت

 Install-Package Append.Blazor.Sidepanel

العرض التوضيحي

يوجد عينة تطبيق في /مستندات يتم استضافته أيضًا كوثائق.

الاستخدام

أضف ISidepanelService عبر di in Program.cs

 builder . Services . AddSidepanel ( ) ;

إضافة إلى _Imports.razor

 @using Append . Blazor . Sidepanel

إضافة إلى MainLayout.razor

 < Sidepanel / >

حقن في مكون/صفحات

 @inject ISidepanelService Sidepanel

الفتح والإغلاق

أساسي

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

مع مكون

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

متقدم مع معلمة 1

يجب تعيين المعلمة في المكون المضاد

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

متقدم مع معلمات متعددة

يجب تعيين المعلمات في المكون المضاد

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

تجاوز التصميم

في app.css

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

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

المساهمات والتعليقات

لا تتردد في استخدام المكون أو فتح المشكلات أو إصلاح الأخطاء أو تقديم ملاحظات.

المساهمين

تم إنشاء هذا المشروع وصيانته بواسطة:

• بنيامين فيرتونغن