pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

ProCard嵌套布局不能自适应大小

Open AstridTrj opened this issue 2 years ago • 0 comments

🧐 问题描述

整个ProCard下共四列ProCard,最后一列的ProCard中又嵌套了两个,每个中有两个Pie,但是会自动换行,要怎么才能自适应不换行,和前面列的大小一样呢,也就是Pie变小的效果

<ProCard split="vertical">
      {/* 1 */}
      <ProCard split="horizontal"
          layout="center" bordered
          direction="col"
          colSpan={4}
      >
          <StatisticCard
              statistic={{
                  title: '患者总数',
              }}
          />
          <StatisticCard
              statistic={{
                  title: '检查总数',
              }}
          />
      </ProCard>
      {/* 2 */}
      <ProCard
          colSpan={5}
          layout="center" bordered
      >
          <StatisticCard
              // bordered={true}
              title="ehsahea"
              chart={
                  <Suspense fallback={null}>
                      <Pie />
                  </Suspense>
              }
          />
      </ProCard>
      {/* 3 */}
      <ProCard
          colSpan={5}
          layout="center" bordered
      >
          <StatisticCard
              // bordered={true}
              title="ehsahea"
              chart={
                  <Suspense fallback={null}>
                      <Pie />
                  </Suspense>
              }
          />
      </ProCard>
      {/* 4 */}
      <ProCard split="vertical" title="ceshi"
          colSpan={10}
      // layout="center" bordered
      >
          <ProCard
              colSpan={12}
              split="horizontal"
          >
              <StatisticCard
                  // bordered={true}
                  title="ehsahea"
                  chart={
                      <Suspense fallback={null}>
                          <Pie />
                      </Suspense>
                  }
              />
              <StatisticCard
                  // bordered={true}
                  title="ehsahea"
                  chart={
                      <Suspense fallback={null}>
                          <Pie />
                      </Suspense>
                  }
              />
          </ProCard>
          <ProCard
              colSpan={12}
              split="horizontal"
          >
              <StatisticCard
                  // bordered={true}
                  title="ehsahea"
                  chart={
                      <Suspense fallback={null}>
                          <Pie  />
                      </Suspense>
                  }
              />
              <StatisticCard
                  // bordered={true}
                  title="ehsahea"
                  chart={
                      <Suspense fallback={null}>
                          <Pie />
                      </Suspense>
                  }
              />
          </ProCard>
      </ProCard>
  </ProCard>

image

AstridTrj avatar Sep 11 '22 02:09 AstridTrj