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

Question

我有这个 sideBar，它会在单击 "btn1" 按钮时显示。因此，我不想使用按钮，而是使用具有相同标题的 垂直条 。基本上我想完成这个：

下面是我的代码到目前为止的样子。谁能指出我正确的方向？提前致谢。

<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 link here - replace the complete TS, HTML & CSS in the stackblitz with the 3 codes below OR Open this

将您现有的 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 中的切换器？

How to add a vertical panel and use it as a toggler in Angular?

css

typescript

primeng

angular