StackItem

By default, each individual element in a Stack is treated as one stack item.

Wrap multiple elements in a StackItem component, and the Stack component will treat them as one item.

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

extend('Playground', (root) => {
  const stack = root.createComponent(InlineStack);
  const stackItemFill = root.createComponent(StackItem, {fill: true});

  const stackItemText = root.createComponent(Text);
  stackItemText.appendChild('Fill the space');

  const stackItemNoFill = root.createComponent(StackItem);
  const text1 = root.createComponent(Text);
  text1.appendChild('Other text');
  const text2 = root.createComponent(Text);
  text2.appendChild('Even more text');

  stackItemFill.appendChild(stackItemText);
  stack.appendChild(stackItemFill);

  stackItemNoFill.appendChild(text1);
  stackItemNoFill.appendChild(text2);
  stack.appendChild(stackItemNoFill);

  root.appendChild(stack);
  root.mount();
});

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

function App() {
  return (
    <InlineStack>
      <StackItem fill>
        <Text>Fill the space</Text>
      </StackItem>
      <StackItem>
        <Text>Other text</Text>
        <Text>Even more text</Text>
      </StackItem>
    </InlineStack>
  );
}

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

Anchor to PropsProps

optional = ?

Anchor to BehaviorBehavior

• 📱 All children of StackItems are placed in a single view object, which makes recycling the views expensive. Consider keeping your StackItems simple.