使用 PrimeNG 网格的 PrimeNG 嵌套 P 面板

Question

我正在尝试在父面板内实现 4 个小面板

<div class="ui-g-12 ui-g-nopad">
      <p-panel header="Statistics">
        <div class="ui-g-6">
          <p-panel header="Clients">
            Total clients: {{clients.length}}
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Products">
            Total products: <!--TODO-->
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Orders">
            Total orders: <!--TODO-->
          </p-panel>
        </div>
        <div class="ui-g-6">
          <p-panel header="Vendor Orders">
            Total vendor orders: <!--TODO-->
          </p-panel>
        </div>
      </p-panel>
    </div>

然而，结果并不是我想要的：

我摆脱了所有 ui-g-6 并得到：

关于如何实现第一个布局但在父面板内部的任何建议，如第二张图片所示？

谢谢

Answer 1

当然，将您的内部面板包裹在一个新的网格中（您已经创建了一个带有面板的新容器，因此您需要一个新的网格）。

<div class="ui-g-12 ui-g-nopad">
    <p-panel header="Statistics">
        <div class="ui-g">
            <div class="ui-g-6">
                <p-panel header="Clients">
                    Total clients: {{clients.length}}
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Products">
                    Total products:
                    <!--TODO-->
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Orders">
                    Total orders:
                    <!--TODO-->
                </p-panel>
            </div>
            <div class="ui-g-6">
                <p-panel header="Vendor Orders">
                    Total vendor orders:
                    <!--TODO-->
                </p-panel>
            </div>
        </div>
    </p-panel>
</div>

使用 PrimeNG 网格的 PrimeNG 嵌套 P 面板

PrimeNG Nested P-panel using PrimeNG Grid

angular

mean-stack

primeng