Blazor Web Assembly Siderbar Error: "SfSidebar.Toggle()' is obsolete: blazor"

Question

我正在尝试在我的 Blazor 项目中使用“Syncfusion”SfSidebar。我从该站点获得了以下代码：单击 here 导航到该站点。

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div class="col-lg-12 col-sm-12 col-md-12">
    <div id="wrapper">
        <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="@Position" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">
            <ChildContent>
                <div class="dock">
                    <ul>
                        <li class="sidebar-item" id="toggle" @onclick="@Toggle">
                            <span class="e-icons expand"></span>
                            <span class="e-text" title="menu">Menu</span>
                        </li>
                        <li class="sidebar-item">
                            <span class="e-icons home"></span>
                            <span class="e-text" title="home">Home</span>
                        </li>
                        <li class="sidebar-item">
                            <span class="e-icons profile"></span>
                            <span class="e-text" title="profile">Profile</span>
                        </li>
                        <li class="sidebar-item">
                            <span class="e-icons info"></span>
                            <span class="e-text" title="info">Info</span>
                        </li>
                        <li class="sidebar-item">
                            <span class="e-icons settings"></span>
                            <span class="e-text" title="settings">Settings</span>
                        </li>
                    </ul>
                </div>
            </ChildContent>
        </SfSidebar>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div id="main-content container-fluid col-md-12">
            <div class="title">Main content</div>
            <div class="sub-title">
                <p>Click the radio button to switch the Sidebar position</p>
                <div class="column">
                    <!-- RadioButton element declaration -->
                    <SfRadioButton @bind-Checked="@Leftbtn" Value="Left" Label="Left" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
                </div>
                <div class="column">
                    <!-- RadioButton element declaration -->
                    <SfRadioButton @bind-Checked="@Leftbtn" Value="Right" Label="Right" Name="state" ValueChange="PositionChange" TChecked="string"></SfRadioButton>
                </div>
            </div>
        </div>
    </div>
</div>
@code {
    SfSidebar Sidebar;
    public string Leftbtn = "Left";
    private SidebarPosition Position { get; set; }
    public void Toggle()
    {
        this.Sidebar.Toggle();
    }
    public void PositionChange(Syncfusion.Blazor.Buttons.ChangeArgs<string> args)
    {
        if (args.Value == "Left")
        {
            this.Position = SidebarPosition.Left;
        }
        else
        {
            this.Position = SidebarPosition.Right;
        }
    }
    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()
{
        {"class", "dockSidebar" }
    };
}
<style>
    .title {
        text-align: center;
        font-size: 20px;
        padding: 15px;
    }

.sub-title {
    text-align: center;
    font-size: 16px;
    padding: 10px;
}

#wrapper .sub-title .column {
    display: inline-block;
    padding: 10px;
}
/* custom code start */
.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}

.sb-content-tab .center {
    display: block;
}
/* custom code end */
/* end of content area styles */
/* Sidebar styles */
.dockSidebar.e-sidebar.e-right.e-close {
    visibility: visible;
    transform: translateX(0%);
}

.dockSidebar .e-icons::before {
    font-size: 25px;
}
/* dockbar icon Style */
.dockSidebar .home::before {
    content: '\e102';
}

.dockSidebar .profile::before {
    content: '\e10c';
}

.dockSidebar .info::before {
    content: '\e11b';
}

.dockSidebar .settings::before {
    content: '\e10b';
}

.e-sidebar .expand::before,
.e-sidebar.e-right.e-open .expand::before {
    content: '\e10f';
}

.e-sidebar.e-open .expand::before,
.e-sidebar.e-right .expand::before {
    content: '\e10e';
}
/* end of dockbar icon Style */
.dockSidebar.e-close .sidebar-item {
    padding: 5px 20px;
}

.dockSidebar.e-dock.e-close span.e-text {
    display: none;
}

.dockSidebar.e-dock.e-open span.e-text {
    display: inline-block;
}

.dockSidebar li {
    list-style-type: none;
    cursor: pointer;
}

.dockSidebar ul {
    padding: 0px;
}

.dockSidebar.e-sidebar ul li:hover span {
    color: white
}

.dockSidebar span.e-icons {
    color: #c0c2c5;
    line-height: 2
}

.e-open .e-icons {
    margin-right: 16px;
}

.e-open .e-text {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 23px;
    font-size: 15px;
}

.sidebar-item {
    text-align: center;
    border-bottom: 1px solid rgba(229, 229, 229, 0.54);
}

.e-sidebar.e-open .sidebar-item {
    text-align: left;
    padding-left: 15px;
    color: #c0c2c5;
}

.dockSidebar.e-sidebar {
    background: #2d323e;
    overflow: hidden;
}
/* custom generated icons styles */
@@font-face {
    font-family: 'e-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* end of custom generated icons styles */
/* custom code start */
.sf-new .sb-header,
.sf-new .sb-bread-crumb,
.sf-new #action-description,
.sf-new .sb-action-description,
.sf-new .e-tab-header,
.sf-new .description-section,
.sf-new #description-section,
.sf-new #description,
.sf-new #navigation-btn,
.sf-new .sb-toolbar-splitter,
.sf-new .sb-footer, .sf-new #left-sidebar, .sb-component-name {
    display: none
}

.sf-new .sb-right-pane.e-view {
    margin-left: 0px !important;
}

.sb-action-description.sb-rightpane-padding {
    padding-bottom: 0;
}

.description-section {
    padding-top: 0;
}

#sb-content-header {
    display: none
}

#content-tab.sb-content-tab {
    height: 100% !important;
}

.sf-new .container-fluid,
.sf-new .container-fluid .control-section,
#sidebar-section, description-section sb-rightpane-padding {
    padding: 0;
}

.sb-component-name.sb-rightpane-padding {
    margin-top: -56px;
}

.sb-right-pane.e-view {
    left: 0;
    padding-left: 0;
    padding-right: 0;
    top: 0;
    overflow-y: hidden;
}

.sb-desktop-wrapper {
    height: 100%;
}

.sb-component-name h1 {
    padding-top: 0;
}

.sf-new .sb-content.e-view {
    top: 0;
}
/* end of newTab support */
/* custom code end */
/* end of sidebar styles */

并在 NavMenu.razor 文件中使用它。然后我收到以下错误。

'SfSidebar.Toggle()' is obsolete: 'This method is deprecated and will no longer be used. Use the IsOpen property to achieve this case.'

然后我改变了

public void Toggle()
{
    this.Sidebar.Toggle();
}

如下，

public void Toggle()
{
    this.Sidebar.IsOpen();
}

然后我收到以下错误消息：-

Non-invocable member 'SfSidebar.IsOpen' cannot be used like a method.

如果你能帮我解决这个问题，我将不胜感激。

谢谢。

Answer 1

Syncfusion Blazor 组件的文档不是最新的。报告了已经错误的描述。

新处理：仅使用 bool 变量并创建您自己的 Toggle 方法：

https://blazor.syncfusion.com/documentation/sidebar/how-to/open-and-close-the-sidebar/

<SfSidebar @ref="SidebarObj" Width="250px" @bind-IsOpen="SidebarToggle"> ...

@code{
    SfSidebar SidebarObj;
    public bool SidebarToggle = false;
    public void Close()
    {
        SidebarToggle = false;
    }
    public void Toggle()
    {
        SidebarToggle = !SidebarToggle;
    }
}

Answer 2

我们已经检查了您报告的边栏组件问题。 IsOpen是Sidebar组件的属性。您已将 isOpen 属性定义为调用方法。这可能是您报告的问题的原因。

IsOpen 的定义请参考以下代码片段属性。

 <SfSidebar Width="220px" DockSize="72px" EnableDock="true" @bind-IsOpen="isOpen" Position="@Position" @ref="Sidebar" HtmlAttributes="@HtmlAttribute"> 
           <ChildContent> 
               <div class="dock"> 
               </div> 
           </ChildContent> 
       </SfSidebar> 
@code { 
public bool isOpen { get; set; } 
public void Toggle() 
   { 
       if (isOpen) 
       { 
           isOpen = false; 
      } 
       else 
       { 
           isOpen = true; 
       } 
   } 
}

参考下面的示例 link。

https://www.syncfusion.com/downloads/support/directtrac/300233/ze/Sidebar1888437932.zip

我们将很快更新文档站点中的更改。

Blazor Web Assembly Siderbar Error: "SfSidebar.Toggle()' is obsolete: blazor"

Blazor Web Assembly Siderbar Error: "SfSidebar.Toggle()' is obsolete: blazor"

sidebar

syncfusion

bootstrap-4

blazor