Inline Stack
Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.
Anchor to inlinestackpropsInlineStackProps
- Anchor to accessibilityLabelaccessibilityLabelstring
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.- Anchor to accessibilityRoleaccessibilityRoleDefault: '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.
- Anchor to blockAlignmentblockAlignmentDefault: 'start'
Position children along the cross axis
- Anchor to blockGapblockGap| boolean
Adjust spacing between elements in the block axis.
Alias for
- Anchor to blockSizeblockSizenumber | `${number}%`
Adjust the block size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to columnGapcolumnGap| boolean
Adjust spacing between children in the inline axis
- < | boolean>
Adjust spacing between children
- string
A unique identifier for the element.
- Anchor to inlineAlignmentinlineAlignmentDefault: 'start'
Position children along the main axis
- Anchor to inlineGapinlineGap| boolean
Adjust spacing between elements in the inline axis.
Alias for
- Anchor to inlineSizeinlineSizenumber | `${number}%`
Adjust the inline size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to maxBlockSizemaxBlockSizenumber | `${number}%`
Adjust the maximum block size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to maxInlineSizemaxInlineSizenumber | `${number}%`
Adjust the maximum inline size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to minBlockSizeminBlockSizenumber | `${number}%`
Adjust the minimum block size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to minInlineSizeminInlineSizenumber | `${number}%`
Adjust the minimum inline size.
number
: size in pixels.`${number}%`
: size in percentages of the available space.
- Anchor to paddingpadding< | boolean>
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 arebase
.base none
means block-start and block-end paddings arebase
, inline-start and inline-end paddings arenone
.base none large
means block-start padding isbase
, inline-end padding isnone
, block-end padding islarge
and inline-start padding isnone
.base none large small
means block-start padding isbase
, inline-end padding isnone
, block-end padding islarge
and inline-start padding issmall
.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
- Anchor to paddingBlockpaddingBlock< | boolean>
Adjust the block-padding.
base none
means block-start padding isbase
, block-end padding isnone
.
- Anchor to paddingBlockEndpaddingBlockEnd| boolean
Adjust the block-end padding.
- Anchor to paddingBlockStartpaddingBlockStart| boolean
Adjust the block-start padding.
- Anchor to paddingInlinepaddingInline< | boolean>
Adjust the inline padding.
base none
means inline-start padding isbase
, inline-end padding isnone
.
- Anchor to paddingInlineEndpaddingInlineEnd| boolean
Adjust the inline-end padding.
- Anchor to paddingInlineStartpaddingInlineStart| boolean
Adjust the inline-start padding.
- Anchor to rowGaprowGap| boolean
Adjust spacing between children in the block axis
InlineStackProps
- accessibilityLabel
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.
string
- accessibilityRole
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.
AccessibilityRole
- blockAlignment
Position children along the cross axis
CrossAxisAlignment
- blockGap
Adjust spacing between elements in the block axis. Alias for `rowGap`
SpacingKeyword | boolean
- blockSize
Adjust the block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- columnGap
Adjust spacing between children in the inline axis
SpacingKeyword | boolean
- gap
Adjust spacing between children
MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>
- id
A unique identifier for the element.
string
- inlineAlignment
Position children along the main axis
MainAxisAlignment
- inlineGap
Adjust spacing between elements in the inline axis. Alias for `columnGap`
SpacingKeyword | boolean
- inlineSize
Adjust the inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- maxBlockSize
Adjust the maximum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- maxInlineSize
Adjust the maximum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- minBlockSize
Adjust the minimum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- minInlineSize
Adjust the minimum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
number | `${number}%`
- padding
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
MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>
- paddingBlock
Adjust the block-padding. - `base none` means block-start padding is `base`, block-end padding is `none`.
MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>
- paddingBlockEnd
Adjust the block-end padding.
SpacingKeyword | boolean
- paddingBlockStart
Adjust the block-start padding.
SpacingKeyword | boolean
- paddingInline
Adjust the inline padding. - `base none` means inline-start padding is `base`, inline-end padding is `none`.
MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>
- paddingInlineEnd
Adjust the inline-end padding.
SpacingKeyword | boolean
- paddingInlineStart
Adjust the inline-start padding.
SpacingKeyword | boolean
- rowGap
Adjust spacing between children in the block axis
SpacingKeyword | boolean
export interface InlineStackProps
extends AccessibilityRoleProps,
AccessibilityLabelProps,
GapProps,
GlobalProps,
SizingProps,
PaddingProps {
/**
* Position children along the main axis
*
* @defaultValue 'start'
*/
inlineAlignment?: MainAxisAlignment;
/**
* Position children along the cross axis
*
* @defaultValue 'start'
*/
blockAlignment?: CrossAxisAlignment;
}
AccessibilityRole
'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'
CrossAxisAlignment
'start' | 'center' | 'end' | 'baseline'
SpacingKeyword
'none' | 'small' | 'base' | 'large'
MaybeTwoBoxEdgesShorthandProperty
T | `${T} ${T}`
MainAxisAlignment
'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
MaybeAllBoxEdgesShorthandProperty
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`
Laying out elements in a row
examples
Laying out elements in a row
React
import React from 'react'; import { render, InlineStack, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => <App />); function App() { return ( <InlineStack gap> <>Child 1</> <>Child 2</> <>Child 3</> <>Child 4</> </InlineStack> ); }
JS
import {extension, InlineStack} from '@shopify/ui-extensions/admin'; export default extension('Playground', (root) => { const inlineStack = root.createComponent( InlineStack, { gap: true, }, [ root.createText('Child 1'), root.createText('Child 2'), root.createText('Child 3'), root.createText('Child 4'), ], ); root.appendChild(inlineStack); });
Preview
