0

我正在使用 PrimeNG DataView 组件，它说使用 PrimeFlex 的 flex 网格 CSS 类来创建网格结构。

这是他们的例子之一，他们说：

在网格模式下，ng-template 元素应该包含一个 div 元素作为您选择的 PrimeFlex 样式类的包装器。

<p-dataView [value]="cars">
    <ng-template let-car pTemplate="listItem">
        <div>
            {{car.id}}
        </div>
    </ng-template>
    <ng-template let-car pTemplate="gridItem">
        <div class="p-col-12 p-md-3">
            {{car.year}}
        </div>
    </ng-template>
</p-dataView>

在我自己的代码中，我尝试过这个，见下文。经过一番尝试找出它为什么不起作用后，我去检查了 PrimeFlex CSS 文件中实际的 .p-grid 和 .p-col-* 样式，但找不到任何东西。

<p-dataView [value]="shows" layout="grid">
  <ng-template pTemplate="header"> List of shows </ng-template>

  <ng-template let-show pTemplate="gridItem">
    <div class="p-col-12 p-md-4">
      <div class="show-grid-item card">
        {{ show.title }}
      </div>
    </div>
  </ng-template>
</p-dataView>

我不知道为什么这里记录的 FlexGrid 样式： https ://www.primefaces.org/showcase/ui/panel/flexGrid.xhtml?jfwid= e9606 不包含在我的 primeflex.css 文件中。

如果我无法获得这些特定样式，有没有办法让 DataView 组件只使用 PrimeFlex 的常规 Grid 样式？

4

1 回答 1

0

如果您使用 primeng 12 和 primeflex 尝试在您的 style.css 中添加。至少在他们更新未来版本中的错误之前。

.p-grid {
display: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;

}

这是我的html代码：

<p-dataView [value]="articuloViewList" layout="grid">
            <ng-template pTemplate="header">
                <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
            </ng-template>
            <ng-template let-art pTemplate="listItem">
                <div>
                    {{art.artName}}
                </div>
            </ng-template>
            <ng-template let-art pTemplate="gridItem" #gridI>
                <div class="col-12 md:col-2">
                    {{art.artNombre}}
                </div>
            </ng-template>
        </p-dataView>
于 2021-08-17T02:15:25.573 回答