OctantisWeb.Components.Polaris.BlockStack (octantis v0.1.12)
View SourceUse 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
Summary
Functions
As A helper for setting the underlaying element of a component
Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
Build Style elements
Functions
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 tofalse
.style
(:string
) - Style attribute.display
(:string
) - Style attribute.margin
(:string
) - Style attribute.max_height
(:string
) - Style attribute.min_height
(:string
) - Style attribute.object_fit
(:string
) - Style attribute.flex_grow
(:string
) - Style attribute.justify_content
(:string
) - Style attribute.grid_auto_rows
(:string
) - Style attribute.grid_template_columns
(:string
) - Style attribute.grid_template_rows
(:string
) - Style attribute.align_items
(:string
) - Style attribute.align_self
(:string
) - Style attribute.- Global attributes are accepted.
Slots
inner_block
(required)
Build Style elements