Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小
问题描述 投票：0回答：1
请参阅下面我的组件代码：
我有一个 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个手风琴的最大尺寸）
- 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？
感谢您的阅读，如有任何帮助，我们将不胜感激！
致以最诚挚的问候，
尼丁阿乌拉。
1个回答
0
投票
投票
通常组件 CSS 的作用域仅限于组件内部，我们可以使用
::ng-deep如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸）
我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类
custom-accordionHTML
...
<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-gutterno-resizeHTML
<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 演示
最新问题
- 使用 cartopy 正交法在范围外绘制轮廓错误
- primeng 桌子高度和宽度问题
- 使用 Java Stream API 将数组拆分为对象
- 使用 Java Stream API 将数组拆分为对象
- 网络请求失败 - 从本地主机 ReactNative 获取
- OllamaChatModel 不再是 Spring Bean 了吗？
- 获取Snowflake内部stageInfo
- R >4.1 语法：错误：管道的 RHS 调用不支持函数“function”
- 在模块内导入 Puppeteer 时，实例方法中未定义“this”
- 更新 redux 状态依赖时不触发 useEffect
- 带有 Pandas 数据帧千位分隔符的 XlsxWriter
- 访问 highcharts 工具提示内链接内的变量
- 如何在 R 面板中转换工作表？
- 如何在R中通过多个参数集循环微分方程？
- ASP.NET MVC 中的视图文件/目录结构应该是什么样的？
- graphviz (DOT) 流程图的节点对齐和合并箭头
- 功能组件数据更新后不重新渲染
- 循环遍历 AntDesign 行/表单；当从下拉列表中选择一个选项时，所有其他行值都会更改
- Facebook Pixel - 多租户电子商务网站
- 如何从 GitHub Actions Workflow Step 容器访问 Github Actions 运行器主机？
© www.soinside.com 2019 - 2024. All rights reserved.