A helper for setting the underlaying element of a component

Attributes

• element (:string) (required) - Must be one of "div", "span", "li", "ol", or "ul".
• Global attributes are accepted.

Slots

• inner_block (required)

Use to display children horizontally in a row. Based on CSS Flexbox.

Examples

<.inline_stack gap={[xs: 500]}>
  <div>Contents</div>
  <div>Contents</div>
</.inline_stack>

See

• https://polaris.shopify.com/components/layout-and-structure/inline-stack
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/InlineStack/InlineStack.tsx

Attributes

• id (:string) - Defaults to nil.
• as (:string) - HTML Element type. Defaults to "div".
• align (:string) - Horizontal alignment of children.Must be one of "start", "center", "end", "space-around", "space-between", or "space-evenly".
• direction (:list) - Horizontal direction in which children are laid out. Defaults to [xs: "row"].
• block_align (:string) - Vertical alignment of children.Must be one of "start", "center", "end", "baseline", or "stretch".
• gap (:list) - The spacing between elements. Accepts a spacing token or an object of spacing tokens for different screen sizes.Examples include [xs: "200", sm: "300", md: "400", lg: "500", xl: "600"].
• wrap (:boolean) - Wrap stack elements to additional rows as needed on small screens. Defaults to true.
• style (:string) - Style attribute.
• align_items (:string) - Style attribute.
• align_self (:string) - Style attribute.
• display (:string) - Style attribute.
• flex_grow (:string) - Style attribute.
• grid_auto_rows (:string) - Style attribute.
• grid_template_columns (:string) - Style attribute.
• grid_template_rows (:string) - Style attribute.
• justify_content (:string) - Style attribute.
• margin (:string) - Style attribute.
• max_height (:string) - Style attribute.
• min_height (:string) - Style attribute.
• object_fit (:string) - Style attribute.
• opacity (:string) - Style attribute.

Slots

• inner_block (required)

Build Style elements