As A helper for setting the underlaying element of a component

Attributes

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

Slots

• inner_block (required)

Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.

Examples

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

See

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

Attributes

• as (:string) - HTML Element type. Defaults to "div".
• align (:string) - Vertical alignment of children.Must be one of "start", "center", "end", "space-around", "space-between", or "space-evenly".
• inline_align (:string) - Horizontal alignment of children.Must be one of "start", "center", "end", "baseline", or "stretch".
• gap (:list) - The spacing between children.Examples include [xs: "500", sm: "400", md: "200"].
• reverse_order (:boolean) - Reverse the render order of child items. Defaults to false.
• 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.
• Global attributes are accepted.

Slots

• inner_block (required)

Build Style elements