Alpha stack

Use to display elements vertically with items placed directly below the preceding item.

Alpha

This component and its documentation is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.

By default, stack is left aligned and stacked items are spaced with 16px in between.

import React from 'react';
import {AlphaStack, Text} from '@shopify/polaris';


function AlphaStackExample() {
  return (
    <AlphaStack>
      <Placeholder width="320px" label="Stack child" />
      <Placeholder width="320px" />
      <Placeholder width="320px" />
    </AlphaStack>
  );
}

const Placeholder = ({
  label = '',
  height = 'auto',
  width = 'auto',
  childWidth = 'auto',
}) => {
  return (
    <div
      style={{
        background: '#7B47F1',
        padding: '14px var(--p-space-2)',
        height: height ?? undefined,
        width: width ?? undefined,
      }}
    >
      <div
        style={{
          display: 'inline-block',
          background: 'rgba(255, 255, 255, 0.3)',
          color: '#FFFFFF',
          width: childWidth ?? undefined,
        }}
      >
        <Text as="h2" variant="bodyMd" fontWeight="medium">
          {label}
        </Text>
      </div>
    </div>
  );
};

Props

Want to help make this feature better? Please share your feedback.

interface AlphaStackProps
children?React.ReactNode
as?'div' | 'ul' | 'ol' | 'fieldset'

HTML Element type.

Defaults to 'div'.

align?'start' | 'end' | 'center'

Vertical alignment of children.

Defaults to 'start'.

fullWidth?boolean

Toggle children to be full width.

Defaults to false.

gap?T | { [Breakpoint in BreakpointsAlias]?: T; }<SpacingSpaceScale>

The spacing between children.

Defaults to '4'.

id?string

HTML id attribute.