# BlockStack

This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.

```tsx
import React from 'react';
import {
  render,
  BlockStack,
} from '@shopify/ui-extensions-react/admin';

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

function App() {
  return (
    <BlockStack gap>
      <>Child 1</>
      <>Child 2</>
      <>Child 3</>
      <>Child 4</>
    </BlockStack>
  );
}

```

```js
import {
  extension,
  BlockStack,
} from '@shopify/ui-extensions/admin';

export default extension(
  'Playground',
  (root) => {
    const blockStack = root.createComponent(
      BlockStack,
      {
        gap: true,
      },
      [
        root.createText('Child 1'),
        root.createText('Child 2'),
        root.createText('Child 3'),
        root.createText('Child 4'),
      ],
    );

    root.appendChild(blockStack);
  },
);

```

## BlockStackProps

### BlockStackProps

### accessibilityLabel

value: `string`

A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied will not be announced to screen readers.

### accessibilityRole

value: `AccessibilityRole`

  - AccessibilityRole: 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'
Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

### blockAlignment

value: `MainAxisAlignment`

  - MainAxisAlignment: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
Position children along the cross axis

### blockGap

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust spacing between elements in the block axis.

Alias for `rowGap`

### blockSize

value: `number | `${number}%``

Adjust the block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### gap

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
  - MaybeTwoBoxEdgesShorthandProperty: T | `${T} ${T}`
Adjust spacing between children

### id

value: `string`

A unique identifier for the element.

### inlineAlignment

value: `CrossAxisAlignment`

  - CrossAxisAlignment: 'start' | 'center' | 'end' | 'baseline'

/**   Position children along the main axis

### inlineSize

value: `number | `${number}%``

Adjust the inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### maxBlockSize

value: `number | `${number}%``

Adjust the maximum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### maxInlineSize

value: `number | `${number}%``

Adjust the maximum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### minBlockSize

value: `number | `${number}%``

Adjust the minimum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### minInlineSize

value: `number | `${number}%``

Adjust the minimum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### padding

value: `MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
  - MaybeAllBoxEdgesShorthandProperty: T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

- `base` means block-start, inline-end, block-end and inline-start paddings are `base`.
- `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`.
- `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
- `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
- `true` applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box

### paddingBlock

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
  - MaybeTwoBoxEdgesShorthandProperty: T | `${T} ${T}`
Adjust the block-padding.

- `base none` means block-start padding is `base`, block-end padding is `none`.

### paddingBlockEnd

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust the block-end padding.

### paddingBlockStart

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust the block-start padding.

### paddingInline

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
  - MaybeTwoBoxEdgesShorthandProperty: T | `${T} ${T}`
Adjust the inline padding.

- `base none` means inline-start padding is `base`, inline-end padding is `none`.

### paddingInlineEnd

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust the inline-end padding.

### paddingInlineStart

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust the inline-start padding.

### rowGap

value: `SpacingKeyword | boolean`

  - SpacingKeyword: 'none' | 'small' | 'base' | 'large'
Adjust spacing between children in the block axis

## Related

- [InlineStack](https://shopify.dev/docs/api/admin-extensions/components/structure/InlineStack)