Skip to main content

BlockStack

BlockStack is used to vertically stack elements


blockstack
import {extend, BlockStack, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
const blockStack = root.createComponent(BlockStack, undefined, [
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
]);

root.appendChild(blockStack);
});
import {render, BlockStack, View} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
return (
<BlockStack>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
<View border="base" padding="base">
View
</View>
</BlockStack>
);
}

optional = ?

NameTypeDescription
alignment?"leading" | "center" | "trailing"Position children along the cross axis
spacing?"xtight" | "tight" | "loose" | "xloose"Adjust spacing between children

Was this page helpful?