Question

我正在使用ng-sidebar在较小的移动屏幕上制作动画并实现可折叠侧边栏。

这是我第一次使用Angular，所以如果问题对其他人来说很简单，我会道歉。

我已经安装了使用npm install ng-sidebar并尝试了工作演示，但我很难根据自己的需要进行调整。

在我的app.component.html中，我从演示中获取了此代码：

<ng-sidebar-container>
 <ng-sidebar
  [(opened)]="_opened"
  [mode]="_MODES[_modeNum]"
  [closeOnClickOutside]="_closeOnClickOutside"
  [closeOnClickBackdrop]="_closeOnClickBackdrop"
  [showBackdrop]="_showBackdrop"
  [animate]="_animate">

  <button (click)="_toggleOpened()">Close sidebar</button>
  <p><a closeSidebar>This will close the sidebar too</a></p>
  <hr>
   <ul class="nav nav-pills flex-column">
        <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
            <a class="nav-link" routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home</a>              
        </li>  
       <ul class="sub-menu collapse" id="home">
        <li class="nav-item list-unstyled"> <a class="nav-link" routerLinkActive="active" routerLink="/home/submenu">Submenu</a>
                </li>
                <li class="nav-item list-unstyled">
               <a class="nav-link" routerLinkActive="active" routerLink="/home/submenu2">Submenu2</a>
                </li>
        <li class="nav-item side">
            <a class="nav-link" routerLinkActive="active" routerLink="/secondMenu"MenuItem>/a>
        </li>
            </ul>
</ng-sidebar>
<div ng-sidebar-content>
  <header class="demo-header">
        <button class="navbar-toggler " type="button"  (click)="_toggleOpened()" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>

    <span>ng-sidebar</span>
  </header>
  <section class="demo-contents">
    <router-outlet></router-outlet>
  </section>
</div>

我不明白的是，如何放一个：

<button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

单击时，称为

_toggleOpened() and [mode]="_MODES[_modeNum]"

模式应该是推送

Example link

并将其放在顶部栏上，如示例所示。因为在尝试演示时我的文档没有应用css样式。

当点击模式推送时，如何使该按钮和侧边栏仅按链接推送内容，还添加透明背景？因此，按钮应该推送内容，添加背景，并在点击屏幕外的任何位置时关闭。？

我再次感到非常抱歉，我只需要一个简单的布局来帮助我开始：|理解它

提前谢谢！

ng-sidebar创建一个侧边栏，将内容推向右侧

0 个答案: