pro-components
pro-components copied to clipboard
ProCard嵌套布局不能自适应大小
🧐 问题描述
整个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>