PolarisHorizontal stack
Use to display children horizontally in a row. Based on CSS Flexbox.
Alpha
This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about ourcomponent lifecycles.
The default wrapping behavior of children can be overridden using thewrapprop.
importReactfrom'react';import{HorizontalStack}from'@shopify/polaris';functionInlineWithNonWrappingExample(){return(<HorizontalStackwrap={false}><Placeholderwidth="106px"height="36px"/><Placeholderwidth="106px"height="20px"showBorder/><Placeholderwidth="106px"height="20px"showBorder/><Placeholderwidth="106px"height="20px"showBorder/><Placeholderwidth="106px"height="20px"showBorder/><Placeholderwidth="106px"height="20px"showBorder/></HorizontalStack>);}constPlaceholder=({height='auto',width='auto',showBorder=false})=>{return(<divstyle={{background:'var(--p-color-text-info)',height:height,width:width,borderInlineStart:showBorder?“1 px冲var(——p-color-bg-success-subdued)”:'none',}}/>);};Props
Want to help make this feature better? Pleaseshare your feedback.
interface
HorizontalStackProps
- children? React.ReactNode
- align? 'start'|'center'|'end'|'space-around'|'space-between'|'space-evenly'
-
Horizontal alignment of children.
- blockAlign? 'start'|'center'|'end'|'baseline'|'stretch'
-
Vertical alignment of children.
- gap? T|({ [BreakpointinBreakpointsAlias]?:T; })<T><SpaceScale>
-
The spacing between elements. Accepts a spacing token or an object of spacing tokens for different screen sizes.
- wrap? boolean
-
Wrap stack elements to additional rows as needed on small screens.
Defaults totrue.
Related components
- To create the large-scale structure of pages,use the HorizontalGrid component
- To display elements vertically,use the VerticalStack component
Related resources
- HorizontalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more aboutCSS logicial properties.