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

Posted 2023-03-06

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

【英文标题】：How to add a vertical panel and use it as a toggler in Angular?

【发布时间】：2019-07-07 21:31:25

【问题描述】：

我有这个 sideBar，当点击 "btn1" 按钮时会显示。因此，我不想拥有一个按钮，而是拥有一个具有相同标题的 垂直条。基本上我想做到这一点：

Expected Result

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

DEMO

<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>

【问题讨论】：

如果您提供的预期结果链接是您正在寻找的，那么采用那里的代码有什么问题？这就是有人与世界分享它的全部意义所在。而且您提供的代码并未发现试图使其正常工作的问题，您基本上只是要求某人为您编写代码，这又在您提供的链接中？

第一个示例使用 Flex，我不需要它。我只想使用自定义的 p-sidebar primeng 组件，而不是像我在第一个示例中那样从头开始创建它。

如果您仅限于primeng解决方案，那么您将无法使用侧边栏而不违反库标准@progx 根据他们的documentation 侧边栏是显示的面板组件作为叠加层您不需要标题中带有“侧边栏”的元素就可以表现得像一个。

我想自定义它，这样我就可以有一个垂直条，当我点击它时，侧边栏就会显示出来。

【参考方案1】：

在此处使用您现有的 DEMO stackblitz 链接 - 将 stackblitz 中的完整 TS、html 和 CSS 替换为以下 3 个代码或 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 替换为以下内容：

#panelHeaderwidth: 100%; height:10vh; background: lightpink;
#panelBody  background:lightcyan; height:90vh;
#menuTogglerwriting-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

【讨论】：

我更愿意使用同一个侧边栏而不是创建另一个 来切换

您添加了一个不属于原始问题的首选项，然后您因此而否决了答案（这是有效的）？

兄弟，我没有投反对票。另外，我认为不需要添加额外的 。我只想使用 ，就像我在演示中使用的那样。

使用普通的 div 来替换 <p-sidebar> 对你有用吗？

谢谢，我的第一个赏金 :) ...祝你在你的努力中最好的...