Blazor.Sidepanel

侧面

预览

安装

 Install-Package Append.Blazor.Sidepanel

演示

/docs文件夹中有一个示例应用程序，该应用程序也托管为文档。

用法

通过di在Program.cs中添加ISidepanelService

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

贡献和反馈

请随时使用组件，打开问题，修复错误或提供反馈。

贡献者

该项目由以下方式创建和维护：

• 本杰明·韦尔顿顿