InlineStack

Use to lay out a horizontal row of components.

A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the alignment and spacing of the items in the stack. Use StackItem to group multiple elements inside a InlineStack together.

import {extend, InlineStack, Text} from '@shopify/admin-ui-extensions';

function buildStackText(root) {
  const text = root.createComponent(Text);
  text.appendChild('Items to stack');
  return text;
}

extend('Playground', (root) => {
  const inlineStack = root.createComponent(InlineStack, {
    inlineAlignment: 'center',
    spacing: 'loose',
  });

  inlineStack.appendChild(buildStackText(root));
  inlineStack.appendChild(buildStackText(root));
  inlineStack.appendChild(buildStackText(root));

  root.appendChild(inlineStack);

  root.mount();
});

import React from 'react';
import {extend, render, InlineStack, Text} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <InlineStack inlineAlignment="center" spacing="loose">
      <Text>Items to stack</Text>
      <Text>Items to stack</Text>
      <Text>Items to stack</Text>
    </InlineStack>
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Anchor to GuidelinesGuidelines

• All children of InlineStack are placed in a single view object, which makes recycling the views expensive and results in poorer performance when scrolling. Consider keeping your stacks simple.
• By default, InlineStack alignment is 'leading’.

For more guidelines, refer to Polaris' Stack best practices.