BlockLayout​

BlockLayout is used to arrange content across multiple lines. By default, all lines will occupy the available block space and share it equally.

Preview​

Code example​

render('Checkout::Dynamic::Render', (props) => {
  return (
    <View border="base">
      <View>
        <Text size="extraExtraLarge">BlockLayoutDemo</Text>
      </View>
      {/* All implicit rows. */}
      <BlockLayout spacing="loose">
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
        <Text>BlockLayoutDemo1</Text>
      </BlockLayout>
      {/* Explicit two rows */}
      <BlockLayout rows={['auto', 'auto']}>
        <Text>BlockLayoutDemo2</Text>
        <Text appearance="subdued" size="base">
          BlockLayoutDemo2
        </Text>
      </BlockLayout>
    </View>
  );
});

BlockLayoutProps​

rows?​

The number of rows to be displayed.

inlineAlignment?​

Alignment along the main axis, where the main axis is the inline axis.

blockAlignment?​

Alignment along the cross axis, where the cross axis is the block axis within the grid area.

spacing?​

Spacing between elements.

padding?​

Inner spacing.

Type descriptions​

MaybeResponsiveConditionalStyle​

• Example of a plain value: base
• Example of a conditional value: { defaultValue: 'tight', conditionals: [{ conditions: { viewportInlineSize: { min: 'medium' } }, value: 'loose' }] }

ConditionalStyle​

ConditionalValue​

Conditions​

ViewportSizeCondition​

AtLeastOne​

ViewportInlineSize​

Refer to Viewport breakpoints.

MaybeShorthandProperty​

ShorthandProperty​

BlockAlignment​

InlineAlignment​

Spacing​

Rows​

GridItemSize​

• auto: Expands based on the content and does not proactively fill the remaining space.
• ${number}fr: Distributes the remaining space equally, where number indicates the share of space.
• fill: Fills the space like 1fr but can shrink to 0 when the content is too long to prevent overflow.
• number: Allocates content space according to the specified value. For example, setting 30 will occupy 30px.
• ${number}%: Occupies content space as a percentage according to the configuration. For example, setting 30% will take up 30% of the content space.