primeng 相关问题

使用此标记可以获得有关PrimeNG的问题，PrimeNG是Angular的UI组件集合。标记为[primeng]的问题也应标记为[angular]，但不是[primefaces]。

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码：我有一个 p 分配器，它分为 3 个部分。我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码：我有一个 p 分离器，它被分成 3 个部分。我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <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> 我这里有两个问题需要解决：如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。（这3个手风琴的最大尺寸）怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？感谢您的阅读，如有任何帮助，我们将不胜感激！致以最诚挚的问候，尼丁阿乌拉。通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。（这3个手风琴的最大尺寸）我只是添加下面的 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做同样的事情，如果你想这样做，你可以引用bootstrap grids中的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; } 完整代码 TS 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 演示

css angular primeng primeng-datatable primeng-table

回答 1 投票 0

Primeng 分页器 rowsPerPageOption 支持“全部”

我想知道是否有一个等效的解决方案（在primeng中）可以为rowsPerPageOptions提供“全部”选项。目前解决这个问题的唯一方法是添加一个非常大的数字，但这并不理想\

primeng

回答 2 投票 0

Primeng 17 和 Bootstrap 5

可以在 Angular 17 项目中使用 primeng ^17.6.0 和 bootstrap ^5.3.2 吗？我想对我的应用程序的公共部分使用 bootstrap，但是我想有一个管理部分......

bootstrap-5 primeng

回答 2 投票 0

如何为 PrimeNG 下拉列表设置可见/不可见的组项目？

当我单击组标题时，如果组中有项目，我想使组项目可见/不可见。是否可以？例如，我想在下拉列表中看到 3 个项目（AA、BB、CC），前 2 个选项（AA 和 BB）

angular typescript drop-down-menu dropdown primeng

回答 1 投票 0

PrimeNG 输入数字与自定义数字格式化程序

我正在使用 PrimeNG 在 Angular 中设置一个表单，并且尝试将元素的值格式化为使用以下格式 XXX.XXXX'XX，即，如果我有值 123.45678，我

angular typescript primeng

回答 1 投票 0

如何为 PrimeNG p-dropdown 静态添加选项

我想为 p-dropdown 静态添加选项。我想为 p-dropdown 静态添加选项。 <p-dropdown [(ngModel)]="selectedOption" placeholder="Select options" optionLabel="name" (onChange)="onChangeOption()"> <option *ngFor="let item of items;" [value]="item.value">{{item.label}}</option> <option value="null">Others</option> </p-dropdown> 我尝试在 ts 文件中动态添加“Others”选项，但我仍然想像这样静态添加有没有更好的方法来做到这一点？谢谢大家您不能直接在 p-dropdown 中使用选项。您必须向选项数组提供数据。例如这里变量cities保存选项数组 <div class="card flex justify-content-center"> <p-dropdown [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Select a City" /> </div> 如果你不想从控制器类提供它，那么你可以像这样直接在 HTML 本身中传递数组 <div class="card flex justify-content-center"> <p-dropdown [options]="[{name: 'Australia', code: 'AU'},{name: 'Brazil', code: 'BR'}]" [(ngModel)]="selectedCity" optionLabel="name" placeholder="Select a City" /> </div>

angular primeng primeng-dropdowns

回答 1 投票 0

全局插入 PrimeNG 复选框自定义图标 TemplateRef（通过指令？）[PrimeNG]

PrimeNG 更改了 ui 组件的图标机制，我正在将 Angular 从 15 更新到 17。我想要我的自定义复选框图标。触摸 html 或 ts 文件中 p-check 的逻辑...

angular primeng updates

回答 1 投票 0

如何在 Angular 中使用 primeNG 分页器

我无法在我的 Angular 应用程序中固定 primeNG 分页器。该分页器包含一个下拉列表，这实际上是我想要对其进行样式化以进行数据编号选择的地方。我搜索了很多次但是

css angular primeng primeng-dropdowns

回答 1 投票 0

在 primeng 17 中找不到模块“primeng/floatlabel”或其相应的类型声明

我在我的项目中使用Primeng版本17。完全根据文档，我继续导入 primeng/floatlabel ，它给出了一个不相关的错误问题出在哪里？版本...