Question

点击“ btn1” 按钮时，会显示此 sideBar 。因此，我不想使用按钮，而是希望使用具有相同标题的竖线。基本上我想做到这一点：

到目前为止，

下面是我的代码。谁能指出我正确的方向？提前谢谢。

<button (click)="openTab()">btn1</button>
<p-sidebar [modal]="false" class="menuPanel" [(visible)]="opened" 
   position="left" [showCloseIcon]="true" autoZIndex="true" 
   baseZIndex="99999">
   This is the Title
</p-sidebar>

Answer 1

在此处使用您现有的DEMO stackblitz链接-用下面的3个代码或Open this

替换stackblitz中完整的TS，HTML和CSS

将现有的 app.component.html 替换为以下内容：

<!-- <button (click)="openTab()">btn1</button> -->
<p-sidebar [modal]="false" class="menuPanel" [(visible)]="opened" position="left" [showCloseIcon]="false" autoZIndex="true" baseZIndex="99999">
  <div id="panelHeader" (click)='menuPanelClose()'> Click here to close menu </div>
  <div id="panelBody"> This is the Title ... <br/> background panel visibility is {{togglePanel}} </div>
</p-sidebar>

<div id='menuToggler' ng-if="togglePanel == true"  (click)="panelClick()">
  This is toggle Panel
</div>

将现有的 app.component.css 替换为以下内容：

#panelHeader{width: 100%; height:10vh; background: lightpink;}
#panelBody { background:lightcyan; height:90vh;}
#menuToggler{writing-mode: vertical-lr;background: lightgreen;width: 40px;padding: 10px;height: 100%;left: 0;position: absolute;top: 0;font-family: "Open Sans", "Helvetica Neue", sans-serif;font-size: 14px;}

用以下内容替换现有的 app.component.ts ：

import { Component } from '@angular/core';
import {SidebarModule} from 'primeng/sidebar';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  opened = false;
  togglePanel:boolean = true;


  openTab() {
    this.opened = true;
  }

  panelClick(){
    this.opened = true;
    this.togglePanel = false;
  }

  menuPanelClose(){
    this.opened = false;
    this.togglePanel = true;
  }

}

更新：发问者不想再使用<p-sidebar>作为菜单切换器

更新2 ：根据提问者的要求发布新的stackblitz

如何添加垂直面板并将其用作Angular中的切换器？

1 个答案: