[{"value":"Preview","id":"preview","hLevel":2,"level":1},{"value":"Code example","id":"code-example","hLevel":2,"level":1},{"value":"BlockStackProps","id":"blockstackprops","hLevel":2,"level":1,"children":[{"value":"inlineAlignment?","id":"inlinealignment","hLevel":3,"level":2},{"value":"spacing?","id":"spacing","hLevel":3,"level":2},{"value":"padding?","id":"padding","hLevel":3,"level":2}]},{"value":"Type descriptions","id":"type-descriptions","hLevel":2,"level":1,"children":[{"value":"InlineAlignment","id":"inlinealignment-1","hLevel":3,"level":2},{"value":"Spacing","id":"spacing-1","hLevel":3,"level":2},{"value":"MaybeShorthandProperty","id":"maybeshorthandproperty","hLevel":3,"level":2},{"value":"ShorthandProperty","id":"shorthandproperty","hLevel":3,"level":2}]}]

BlockStack

BlockStack is used to stack elements vertically.

Preview

Code example

render('Checkout::Dynamic::Render', (props) => {
  return (
    <BlockStack>
      <Text>BlockStackDemo1</Text>
      <Text>BlockStackDemo1</Text>
      <Text>BlockStackDemo1</Text>
      <Text>BlockStackDemo1</Text>
      <Text>BlockStackDemo1</Text>
    </BlockStack>
  );
});

BlockStackProps

tip

Optional properties are marked with a ?. Properties without a ? are required.

inlineAlignment?

InlineAlignment

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

spacing?

Spacing Default: base

Spacing between elements.

padding?

MaybeShorthandProperty<Spacing>

Inner spacing.

Type descriptions

InlineAlignment

start center end

Spacing

none base extraTight tight loose extraLoose

MaybeShorthandProperty

T | ShorthandProperty<T>

ShorthandProperty

[T, T] [T, T, T, T]

Was this article helpful to you?

SHOPLINE

Legal

BlockStack​

Preview​

Code example​

BlockStackProps​

inlineAlignment?​

spacing?​

padding?​

Type descriptions​

InlineAlignment​

Spacing​

MaybeShorthandProperty​

ShorthandProperty​