css - 自动展开所有 PrimeNG Accordion 面板以进行打印

Question

我目前在我的 Angular 元素中使用 PrimeNG 库的 Accordion 组件。 See info here .

该模板包含一些用于打印页面的特殊 css 样式——如下所示:

 @media print {
  .profile-progress-bar, .top-template-header-content, .header.profile-header{
    display: none !important;
  }
  html, body {
    height: auto;
    font-size: 10px !important;
  }

  p-accordionTab > div {
    display: block !important;
    selected: true !important;
  }

}

我想做的是，在为要打印的页面处理 @media print 渲染时，自动展开所有 accordionTab 元素。

从文档中我看到每个 accordionTab 元素都有一个 [selected] 属性，可以将其绑定(bind)并设置为“true”以展开选项卡。

Selected Visibility of the content is specified with the selected property that supports one or two-way binding.

但是，当 @media print 渲染发生时，这能以某种方式自动触发吗？

谢谢!

Answer 1

媒体查询是可行的方法，您可以采用纯 CSS 方法来实现； TS 或 HTML 文件没有变化

相关css:

@media print {
  ::ng-deep .ui-accordion-content-wrapper-overflown {
      overflow: visible;
      height: auto !important;
  }
}

完成demo on stackblitz here