InlineStack

InlineStack is used to lay out a horizontal row of elements

Anchor to ExampleExample

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

extend('Checkout::PostPurchase::Render', (root) => {

const inlineStack = root.createComponent(

InlineStack,

{

spacing: 'base',

[

root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),

);

root.appendChild(inlineStack);

});

import {render, InlineStack, View} from '@shopify/post-purchase-ui-extensions-react';

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

function App() {

return (

View

</View>

View

</View>

View

</View>

</InlineStack>

);

}

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

extend('Checkout::PostPurchase::Render', (root) => {
  const inlineStack = root.createComponent(
    InlineStack,
    {
      spacing: 'base',
    },
    [
      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(inlineStack);
});

import {render, InlineStack, View} from '@shopify/post-purchase-ui-extensions-react';

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

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

Anchor to PropsProps

optional = ?

Name	Type	Description
alignment?	`"leading" \| "center" \| "trailing"`	Position children along the cross axis
spacing?	`"xtight" \| "tight" \| "loose" \| "xloose"`	Adjust spacing between children

Was this page helpful?