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 演示
最新问题
- Magento 快速搜索 - 首先显示给定类别的结果
- Compose 桌面上缺少主调度程序
- 如何通过 laravel 的 cacasdeOnDelete 从数据库中删除记录时从存储中删除文件
- 如何从 cmd 向 stderr 发送消息？
- 引导的 firefox 插件中的自定义协议处理程序
- 在 Django 中创建/编辑 MS Word 和 Word Perfect 文档？
- 使用 VBA 过滤标题并复制行
- Navigator.pushReplacement 下一个屏幕后仍然有后退按钮，新屏幕覆盖上一个屏幕
- 从调试器在 IntelliJ Idea 中获取 JSON 形式的对象
- 当服务运行较旧的ServiceStack版本时如何使用最新的AuthDtos？
- Aiogram 机器人可以在私人聊天中回复我的消息，但可以在群聊中回复我的消息
- 有人可以帮我反混淆这个lua脚本吗？
- React Native 中 Storybook 有什么用？
- 校正 MNIST 日期集
- 无法仅保留 Aerospike 地图中的最后一个键（已排序）
- FLutter Bloc：下一个屏幕后的 Navigator.pushReplacement 仍然有后退按钮，新屏幕覆盖上一个屏幕
- 如何禁用视图中的其他按钮
- 写入 Feather 或 Parquet 文件格式时出现 Geopandas 错误 - UnsupportedGEOSVersionError：“iso”选项至少需要 GEOS 3.10.0
- Haskell 记录更新看似不兼容的类型
- 如何将连续变量更改为分类变量？
© www.soinside.com 2019 - 2024. All rights reserved.