Grid

Gird 用于以行和列的矩阵形式布局内容。

预览​

示例代码​

render('Checkout::Dynamic::Render', (root) => {
  return <>
    <Grid
      columns={[100, 'fill', '20%']}
      rows={['auto', 100, 'auto']}
      spacing="loose"
      padding="loose"
      >
      <GridItem columnSpan={3}>
        <View> Grid: </View>
      </GridItem>
      <View border="base" padding="base">
        100 / 100
      </View>
      <View border="base" padding="base">
        fill / 100
      </View>
      <View border="base" padding="base">
        20% / 100
      </View>
      <GridItem columnSpan={2}>
        <View border="base" padding="base">
          100 + fill / auto
        </View>
      </GridItem>
      <View border="base" padding="base">
        20% / auto
      </View>
    </Grid>
  </>;
});

GridProps​

columns?​

布局中每一列的尺寸。

rows?​

布局中每一行的尺寸。

spacing?​

子元素之间的间距；传两个的情况，第一个为行间距，第二个为列间距。

border?​

边框类型，MaybeShorthandProperty 代表支持传入个数可以为 1 或 2 或 4。

• 传入 1 个值，作用所有边框。
• 传入 2 个值，第一个值作用上下边框，第二个值作用左右边框。
• 传入 4 个值，分别作用上右下左。

cornerRadius?​

圆角大小。

padding?​

布局的内边距。

overflow?​

超出展示或者隐藏。

inlineAlignment?​

横轴元素对齐方式。

blockAlignment?​

纵轴元素对齐方式。

类型说明​

GridItemSize​

• auto：由内容撑开，不会主动填满剩余空间。
• ${number}fr：均分剩余空间，number表示占其中的几份。
• fill：像 1fr 一样填满空间，但内容超长时能收缩到 0，防止溢出。
• number：按照配置的值进行内容空间分配，如配置 30 则占据 30px。
• ${number}%：按照配置的百分比进行内容空间的占位，如配置 30% 则占据内容空间的 30%。

Spacing​

BorderStyle​

CornerRadius​

MaybeResponsiveConditionalStyle​

• 普通值示例：base
• 条件值示例：{ defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

参考 视口断点。

MaybeShorthandProperty​

ShorthandProperty​