Shopify Polaris 在布局中保持卡片的高度比例

Question

我正在使用 Shopify Polaris 创建我的 Shopify 应用程序，并且我尝试使用

Layout

组件和

Card

组件来正确构建页面。所以现在，我在

<Layout>

中有两张卡，但问题是，由于两张卡中的数据量不同，它们的高度不同（Polaris 自行调整大小），这让它看起来很糟糕。这是我正在谈论的示例：https://codesandbox.io/s/y37on11x9j。 如果您在单独的浏览器上打开沙箱结果，以全屏查看它，您会看到有两张具有不同高度的卡片。我只是希望它们高度相同。我可以得到任何帮助吗？谢谢！

Answer 1

在 Card 元素内部添加一个 Box 元素并使用 minHeight 属性：https://polaris.shopify.com/components/layout-and-struct/box

您的布局部分应该如下所示。如果您有三个彼此相邻的 Layout.Sections，则它们都将具有相同的高度，除非其中一个扩展超过了 minHeight。

<Layout.Section variant="oneThird">
  <Card>
    <Box minHeight="460px">
      <BlockStack gap="500">
        <Text as="h2" variant="headingMd">
          Small Header
        </Text>
        <Text as="h3" variant="headingXl">
          Big Header
        </Text>
        <Text variant="bodyMd">
          Body Text
        </Text>
      </BlockStack>
    </Box>
  </Card>
</Layout.Section>