InlineLayout

InlineLayout is used to manage content layout across multiple columns. By default, all columns share equal width and fill the available inline space. If content exceeds the explicitly set number of columns, it does not wrap. Instead, new columns are dynamically added to occupy the remaining inline space.

Preview​

Code example​

render('Checkout::Dynamic::Render', (props) => {
  return (
    <View border="base">
      <View>
        <Text size="extraExtraLarge">InlineLayoutDemo</Text>
      </View>
      <InlineLayout spacing="tight" columns={[64, 'fill', 'auto']}>
        <Text>InlineLayoutDemo1</Text>
        <Text>InlineLayoutDemo1</Text>
        <Text>InlineLayoutDemo1</Text>
      </InlineLayout>
      <InlineLayout
        spacing="extraTight"
        blockAlignment="center"
        columns={['auto', 'auto', 'auto', 'auto']}
        >
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
        <Text>InlineLayoutDemo2</Text>
      </InlineLayout>
      <InlineLayout columns={['fill', 'auto']} blockAlignment="center" spacing="tight">
        <Text>InlineLayoutDemo3</Text>
        <Text>InlineLayoutDemo3</Text>
      </InlineLayout>
      <InlineLayout columns={['auto', 'auto']} blockAlignment="center" spacing="tight">
        <Text>InlineLayoutDemo4</Text>
        <Text>InlineLayoutDemo4</Text>
      </InlineLayout>
    </View>
  );
});

InlineLayoutProps​

columns?​

The number of colums 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​

BlockAlignment​

InlineAlignment​

Spacing​

Columns​

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.

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​