PrimeNG — популярная библиотека компонентов пользовательского интерфейса для приложений Angular. Он предоставляет широкий спектр готовых к использованию компонентов, включая панели, которые можно переключать или сворачивать. В этой статье мы рассмотрим различные методы создания переключаемой панели в PrimeNG, в частности, путем щелчка по строке заголовка. Мы предоставим примеры кода для каждого метода, что позволит вам выбрать подход, который лучше всего соответствует вашим потребностям.

Метод 1: использование компонента PrimeNG Accordion
Компонент Accordion в PrimeNG позволяет создавать складные панели. Настраивая шаблон заголовка, мы можем заставить панель переключаться при щелчке по строке заголовка. Вот пример:

<p-accordion>
  <p-accordionTab headerTemplate>
    <ng-template pTemplate>
      <div (click)="panel.toggle()">
        Header Row
      </div>
      <div>
        Panel Content
      </div>
    </ng-template>
  </p-accordionTab>
</p-accordion>

Метод 2: использование PrimeNG Panel и директивы ngClass
Другой подход — использовать компонент Panel из PrimeNG вместе с директивой ngClass для переключения видимости панели. Вот пример:

<div class="panel-header" (click)="panelVisible = !panelVisible">
  Header Row
</div>
<div class="panel-content" [ngClass]="{'hidden': !panelVisible}">
  Panel Content
</div>

.panel-content.hidden {
  display: none;
}

Метод 3: использование директивы ngIf
Вы также можете использовать директиву ngIf для условной визуализации содержимого панели на основе логической переменной, которая представляет видимость панели. Вот пример:

<div class="panel-header" (click)="panelVisible = !panelVisible">
  Header Row
</div>
<div *ngIf="panelVisible" class="panel-content">
  Panel Content
</div>

Метод 4: использование компонента диалога PrimeNG
Если вы предпочитаете панель в стиле диалога, которую можно отображать и скрывать, вы можете использовать компонент диалога PrimeNG. Вот пример:

<button (click)="showDialog = true">Open Panel</button>
<p-dialog [(visible)]="showDialog" [modal]="false" [closable]="false">
  <div class="panel-header" (click)="showDialog = false">
    Header Row
  </div>
  <div class="panel-content">
    Panel Content
  </div>
</p-dialog>

В этой статье мы рассмотрели несколько способов создания переключаемой панели в PrimeNG путем щелчка по строке заголовка. Мы предоставили примеры кода для каждого метода, что позволяет вам выбрать тот, который соответствует вашим требованиям. Независимо от того, выберете ли вы компонент Accordion, директиву ngClass, директиву ngIf или компонент Dialog, теперь у вас есть инструменты для улучшения пользовательского интерфейса вашего приложения PrimeNG. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует вашим потребностям.