Prime ng: программно определить размер p-аккордеона, который присутствует внутри p-сплиттера

Обычно CSS компонента ограничен только внутри компонента. Мы можем использовать ::ng-deep, чтобы переопределить это поведение, и CSS будет виден за пределами компонента!

Как сделать размер всех аккордеонов одинаковым? Обратите внимание, что контент динамичен, и каждый аккордеон растет в соответствии со своим содержимым. Я хочу, чтобы все аккордеоны были одного размера. (Максимальный размер этих трех аккордеонов)

Я просто добавляю приведенный ниже CSS, чтобы убедиться, что полная высота распространяется на все элементы аккордеона. Я использую класс custom-accordion, чтобы гарантировать, что CSS ограничен самим аккордеоном!

HTML

...
<div class = "card w-full custom-accordion" [ngClass] = "{'no-resize': noResize}">
...

CSS

::ng-deep .custom-accordion .p-accordion-content {
    height: calc(100% - 54px) !important;
}

::ng-deep .custom-accordion .p-toggleable-content,
::ng-deep .custom-accordion .p-accordion-tab,
::ng-deep .custom-accordion p-accordiontab,
::ng-deep .custom-accordion .p-accordion {
    height:100% !important;
} 

Как сделать так, чтобы сплиттер не менял размер? В настоящее время пользователь может изменить размер разделителя. Если я хочу остановить это, как я могу этого добиться?

Я не уверен, зачем вам нужен элемент изменения размера. Если изменение размера не требуется, вы можете просто сделать то же самое с flexbox. Если вы хотите это сделать, вы можете использовать CSS из загрузочных сеток!

Чтобы добиться того, чего вы хотите, мы можем просто скрыть панель изменения размера с помощью класса p-splitter-gutter Я использую ту же концепцию, ограничивая ее до уровня аккордеона, используя класс no-resize

HTML

<button (click) = "noResize = !noResize">toggle Resize</button>
{{noResize}}
<div class = "card w-full custom-accordion" [ngClass] = "{'no-resize': noResize}">
...

CSS

/* disable the resize */
::ng-deep .no-resize .p-splitter-gutter {
    display: none !important;
}

ПОЛНЫЙ КОД

ТС

import { Component } from '@angular/core';
import { ImportsModule } from './imports';

@Component({
  selector: 'splitter-horizontal-demo',
  templateUrl: './splitter-horizontal-demo.html',
  standalone: true,
  imports: [ImportsModule],
  styles: [
    `
    ::ng-deep .custom-accordion .p-accordion-content {
        height: calc(100% - 54px) !important;
    }

    ::ng-deep .custom-accordion .p-toggleable-content,
    ::ng-deep .custom-accordion .p-accordion-tab,
    ::ng-deep .custom-accordion p-accordiontab,
    ::ng-deep .custom-accordion .p-accordion {
        height:100% !important;
    } 
    /* disable the resize */
    ::ng-deep .no-resize .p-splitter-gutter {
        display: none !important;
    }
  `,
  ],
})
export class SplitterHorizontalDemo {
  noResize = false;
  documentList = [
    { name: 'test' },
    { name: 'test1' },
    { name: 'test2' },
    { name: 'test3' },
    { name: 'test4' },
    { name: 'test5' },
    { name: 'test6' },
  ];
  paperDocumentList = [
    {
      number: 'test',
      name: 'test',
      type: 'test',
      docNumber: 'test',
      docDate: 'test',
    },
    {
      number: 'test',
      name: 'test',
      type: 'test',
      docNumber: 'test',
      docDate: 'test',
    },
    {
      number: 'test',
      name: 'test',
      type: 'test',
      docNumber: 'test',
      docDate: 'test',
    },
    {
      number: 'test',
      name: 'test',
      type: 'test',
      docNumber: 'test',
      docDate: 'test',
    },
  ];
  docusignDocumentList = [
    {
      name: 'test',
      number: 'test',
    },
  ];

  noAction(event: any) {
    event.preventDefault();
    return false;
  }
}

HTML

<button (click) = "noResize = !noResize">toggle Resize</button>
{{noResize}}
<div class = "card w-full custom-accordion" [ngClass] = "{'no-resize': noResize}">
  <p-splitter
    [panelSizes] = "[30, 40, 30]"
    styleClass = "mb-5"
    (onResizeEnd) = "noAction($event)"
    (onResizeStart) = "noAction($event)"
  >
    <ng-template pTemplate>
      <p-accordion [activeIndex] = "0" styleClass = "h-full">
        <p-accordionTab header = "Signed PDF Documents">
          <div class = "flex justify-content-between">
            <div>
              <h6>Proposal PDF Documents</h6>
            </div>
            <div><a>Add Attachment(s)</a></div>
          </div>
          <ng-template pTemplate>
            <p-table
              [value] = "documentList"
              styleClass = "p-3 p-datatable-striped"
            >
              <ng-template pTemplate = "header">
                <tr>
                  <th pSortableColumn = "name">
                    Attachment Name
                    <p-sortIcon field = "name"></p-sortIcon>
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate = "body" let-doc>
                <tr>
                  <td><a>{{ doc.name }}</a></td>
                </tr>
              </ng-template>
            </p-table>
          </ng-template>
        </p-accordionTab>
      </p-accordion>
    </ng-template>
    <ng-template pTemplate>
      <p-accordion [activeIndex] = "0">
        <p-accordionTab header = "Papervision Documents">
          <div class = "flex justify-content-between">
            <div>
              <h6>Scanned Contract Documents</h6>
            </div>
          </div>
          <ng-template pTemplate>
            <p-table
              [value] = "paperDocumentList"
              styleClass = "p-3 p-datatable-striped"
            >
              <ng-template pTemplate = "header">
                <tr>
                  <th pSortableColumn = "number">
                    Customer Number
                    <p-sortIcon field = "number"></p-sortIcon>
                  </th>
                  <th pSortableColumn = "name">
                    Customer Name
                    <p-sortIcon field = "name"></p-sortIcon>
                  </th>
                  <th pSortableColumn = "type">
                    Doc Type
                    <p-sortIcon field = "type"></p-sortIcon>
                  </th>
                  <th pSortableColumn = "docNumber">
                    Doc Number
                    <p-sortIcon field = "docNumber"></p-sortIcon>
                  </th>
                  <th pSortableColumn = "docDate">
                    Doc Date
                    <p-sortIcon field = "docDate"></p-sortIcon>
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate = "body" let-doc>
                <tr>
                  <td><a>{{ doc.number }}</a></td>
                  <td>{{ doc.name }}</td>
                  <td>{{ doc.type }}</td>
                  <td>{{ doc.docNumber }}</td>
                  <td>{{ doc.docDate }}</td>
                </tr>
              </ng-template>
            </p-table>
          </ng-template>
        </p-accordionTab>
      </p-accordion>
    </ng-template>
    <ng-template pTemplate>
      <p-accordion [activeIndex] = "0" class = "w-100">
        <p-accordionTab header = "Docusign Documents">
          <div class = "flex justify-content-between">
            <div>
              <h6>Docusign Documents</h6>
            </div>
          </div>
          <ng-template pTemplate>
            <p-table
              [value] = "docusignDocumentList"
              styleClass = "p-3 p-datatable-striped"
            >
              <ng-template pTemplate = "header">
                <tr>
                  <th pSortableColumn = "name">
                    Document Name
                    <p-sortIcon field = "name"></p-sortIcon>
                  </th>
                  <th pSortableColumn = "number">
                    Doc Id
                    <p-sortIcon field = "number"></p-sortIcon>
                  </th>
                </tr>
              </ng-template>
              <ng-template pTemplate = "body" let-doc>
                <tr>
                  <td>{{ doc.name }}</td>
                  <td><a>{{ doc.number }}</a></td>
                </tr>
              </ng-template>
            </p-table>
          </ng-template>
        </p-accordionTab>
      </p-accordion>
    </ng-template>
  </p-splitter>
</div>

Демо-версия Stackblitz