如何将 Syncfusion Sidebars <span> class 转换为我的自定义设计？

Question

目前我已经在我的 Syncfusion Blazor 项目中添加了一个侧边栏，这个侧边栏有一个侧边栏项目可以将菜单扩展到更宽或将其调整到更小，但是这种设计不是我想要的。我得到的是：

边栏已打开：

边栏已关闭：

现在的问题是侧边栏项目“<菜单”，单击此项目将打开全宽或侧边栏或将其关闭（如果已打开）。我想要达到的是这样的：

上图表示一个侧边栏项目，与“<菜单>相同。我正在尝试将“<菜单”侧边栏项目转换为类似这样的东西，有人知道如何实现吗？

边栏代码：

   <SfSidebar Width="220px" DockSize="72px" EnableDock="true" Position="SidebarPosition.Left" @ref="Sidebar" HtmlAttributes="@HtmlAttribute">
        <ChildContent>
            <div class="dock">
                <ul>
                    <li class="sidebar-item" id="toggle" @onclick="@Toggle">
                        <NavLink class="nav-link" href="">
                            <span class="e-icons expand"></span>
                            <span class="e-text" title="home">Menu</span>
                        </NavLink>
                    </li>
                    <li class="sidebar-item">
                        <NavLink class="nav-link" href="page1" Match="NavLinkMatch.All">
                            <span class="oi oi-dashboard" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="home">Page 1</span>
                        </NavLink>
                    </li>
                    <li class="sidebar-item">
                        <NavLink class="nav-link" href="page2" Match="NavLinkMatch.All">
                            <span class="oi oi-graph" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="profile">Page 2</span>
                        </NavLink>
                    </li>
                    <li class="sidebar-item">
                        <NavLink class="nav-link" @onclick="()=>expandShipDetailsSubNav = !expandShipDetailsSubNav">
                            <span class="oi oi-eye" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="info">Page 3</span>
                        </NavLink>
                        @if (expandShipDetailsSubNav)
                        {
                            <NavLink class="nav-link" href="/page3/1" Match="NavLinkMatch.All">
                                Vessel 1
                            </NavLink>
                            <NavLink class="nav-link" href="/page3/2" Match="NavLinkMatch.Prefix">
                                Vessel 2
                            </NavLink>
                            <NavLink class="nav-link" href="/page3/3" Match="NavLinkMatch.Prefix">
                                Vessel 3
                            </NavLink>
                            <NavLink class="nav-link" href="/page3/4" Match="NavLinkMatch.Prefix">
                                Vessel 4
                            </NavLink>
                            <NavLink class="nav-link" href="/page3/5" Match="NavLinkMatch.Prefix">
                                Vessel 5
                            </NavLink>

                        }
                    </li>
                    <li class="sidebar-item">
                        <NavLink class="nav-link" @onclick="()=>expandReportingSubNav = !expandReportingSubNav">
                            <span class="oi oi-file" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="info">Page 4</span>
                        </NavLink>
                        @if (expandReportingSubNav)
                        {
                            <NavLink class="nav-link" href="/page4/1" Match="NavLinkMatch.All">
                                EU MRV
                            </NavLink>
                            <NavLink class="nav-link" href="/page4/2" Match="NavLinkMatch.Prefix">
                                IMO DCS
                            </NavLink>
                        }
                    </li>
                    <li class="sidebar-item">
                        <NavLink class="nav-link" href="page 5" Match="NavLinkMatch.All">
                            <span class="oi oi-cog" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="home">Page 5</span>
                        </NavLink>
                    </li>
                    <li class="sidebar-item" id="li6">
                        <NavLink class="nav-link" href="" @onclick="@OnBtnClick">
                            <span class="oi oi-power-standby" style="font-size: 30px; margin-right: 15px;"></span>
                            <span class="e-text" title="home">Sign Out</span>
                        </NavLink>
                    </li>
                </ul>
            </div>
        </ChildContent>
    </SfSidebar>

CSS:

<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 #e5e5e58a solid;
}

.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 */

/* Custom css*/

.sidebar-item {
    color: #BBBBBB !important;
}

a {
    color: #BBBBBB !important;
}


.sidebar-item:hover {
    color: white !important;
}

a:hover {
    color: white !important;
}

/* Custom button */
.e-custom {
    border-radius: 15px;
    height: 30px;
    width: 150px;
}

    .e-custom, .e-custom:hover, .e-custom:focus, .e-custom:active {
        background-color: #ff6e40;
        color: #fff;
    }

#button-control {
    width: 100%;
    margin: 8% 0;
    text-align: center;
}

@@media only screen and (max-width: 500px) {
    #button-control {
        margin-left: -3%;
    }
}

.button-section {
    width: 100%;
    margin: auto;
}

#button-control .col-xs-12 {
    margin: 15px 0;
}

@@font-face {
    font-family: 'button-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1uSf8AAAEoAAAAVmNtYXDOXM6wAAABtAAAAFRnbHlmcV/SKgAAAiQAAAJAaGVhZBNt0QcAAADQAAAANmhoZWEIUQQOAAAArAAAACRobXR4NAAAAAAAAYAAAAA0bG9jYQNWA+AAAAIIAAAAHG1heHABGQAZAAABCAAAACBuYW1lASvfhQAABGQAAAJhcG9zdFAouWkAAAbIAAAA2AABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAADQABAAAAAQAAYD3WXF8PPPUACwQAAAAAANgtxgsAAAAA2C3GCwAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAANAA0AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnDQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAQAAAAAYABAABAALnCOcN//8AAOcB5wr//wAAAAAAAQAGABQAAAABAAMABAAHAAIACgAJAAgABQAGAAsADAAAAAAADgAkAEQAWgByAIoApgDAAOAA+AEMASAAAQAAAAADYQP0AAIAADcJAZ4CxP08DAH0AfQAAAIAAAAAA9QD9AADAAcAACUhESEBIREhAm4BZv6a/b4BZv6aDAPo/BgD6AAAAgAAAAADpwP0AAMADAAANyE1ISUBBwkBJwERI1kDTvyyAYH+4y4BeQGANv7UTAxNlwEIPf6eAWI9/ukDEwAAAAIAAAAAA/QDngADAAcAADchNSETAyEBDAPo/Bj6+gPo/gxipgFy/t0CRwAAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHC/koBtnwBtv5KfAI+fP5KAbZ8AbYAAQAAAAAD9AP0AAsAAAEhFSERMxEhNSERIwHh/isB1T4B1f4rPgIfPv4rAdU+AdUAAgAAAAAD9AOlAAMADAAANyE1ISUnBxc3JwcRIwwD6PwYAcWjLO7uLKI/Wj+hoSvs6iyhAm0AAAABAAAAAAP0A/QACwAAAREhFSERMxEhNSERAeH+KwHVPgHV/isD9P4rPv4rAdU+AdUAAAAAAgAAAAADdwP0AAMADAAANyE1ISUBBwkBJwERI4kC7v0SAVj+0SkBdgF4Kf7RPgw+rQEJL/64AUgv/vgC/AAAAAEAAAAAA/QD9AALAAABIRUhETMRITUhESMB2v4yAc5MAc7+MkwCJkz+MgHOTAHOAAIAAAAAA/QDzQADAAcAADchNSE1KQEBDAPo/BgB9AH0/gwzpZUCYAACAAAAAAP0A80AAwAHAAA3ITUhNSkBAQwD6PwYAfQB9P4MM6WVAmAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gYnV0dG9uLWljb25zUmVndWxhcmJ1dHRvbi1pY29uc2J1dHRvbi1pY29uc1ZlcnNpb24gMS4wYnV0dG9uLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAGIAdQB0AHQAbwBuAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABiAHUAdAB0AG8AbgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4ACm1lZGlhLXBsYXkLbWVkaWEtcGF1c2UQLWRvd25sb2FkLTAyLXdmLQltZWRpYS1lbmQHYWRkLW5ldwtuZXctbWFpbC13ZhB1c2VyLWRvd25sb2FkLXdmDGV4cGFuZC0wMy13Zg5kb3dubG9hZC0wMi13ZgphZGQtbmV3XzAxC21lZGlhLWVqZWN0Dm1lZGlhLWVqZWN0LTAxAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

.e-btn-sb-icons {
    font-family: 'button-icons';
    line-height: 1;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.e-play-icon::before {
    content: '\e701';
}

.e-pause-icon::before {
    content: '\e705';
}

.e-open-icon::before {
    content: '\e70d';
}

.e-add-icon::before {
    content: '\e70a';
}

Answer 1

我们已经检查了您对侧边栏组件的要求。当禁用侧边栏的 EnableDock 属性时，它 expand/collapse 侧边栏基于侧边栏组件的全宽。请参考以下 link 了解更多关于 EnableDock 属性.

https://blazor.syncfusion.com/documentation/sidebar/docking-sidebar/

根据您分享的图片，您希望在单击粘滞按钮时打开边栏。要实现这个需求，需要在SF Sidebar元素中添加sticky button，然后点击sticky button click时可以展开或折叠sidebar组件。

我们准备了一个简单的示例，其中将侧边栏放置在屏幕的左端，并向其添加了粘性按钮，就像您对侧边栏的期望一样。

/* sample-level sticky button styles */  
  .e-sidebar #e-leftSticky { 
        position: relative; 
        cursor: pointer; 
        top: 50%; 
        height: 30px; 
        left: -57px; 
        border-radius: 0px 0px 10px 10px; 
        background: linear-gradient(90deg, #000428, #004e92); 
        text-align: left; 
        font-size: 18px; 
        text-align: center; 
        text-indent: 10px; 
        -ms-transform: rotate(270deg); 
        -webkit-transform: rotate(270deg); 
        transform: rotate(270deg); 
    } 
 
    .e-sidebar.e-close, .e-sidebar.e-open { 
        overflow: initial; 
        visibility: visible !important; 
    }

参考下面的示例 link。 https://www.syncfusion.com/downloads/support/directtrac/general/ze/Responsive_Sidebar37687257.zip

要了解有关 Sidebar 组件的更多信息，请参阅下面的 links。

UG文档-https://blazor.syncfusion.com/documentation/sidebar/getting-started/

演示 link-https://blazor.syncfusion.com/demos/sidebar/default-functionalities/

API参考-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Navigations.ISidebar_members.html

如果您需要任何进一步的帮助，请告诉我们。

此致，

Sowmiya.P

如何将 Syncfusion Sidebars <span> class 转换为我的自定义设计？

How to transform a Syncfusion Sidebars <span> class to my custom design?

html

css

blazor

sidebar

syncfusion