Container
1100px centered flex container. Place inside section for centered, max-width content.
Type: "container" · Menerima children
1100px centered flex container. Place inside section for centered, max-width content.
Props
| Field | Type | Default | Keterangan |
|---|---|---|---|
htmlTag | 'div'|'section'|'article'|'aside'|'nav'|'header'|'footer'|'main'|'a'|'figure'|'address'|'ul'|'ol'|'li' | "div" | HTML Tag |
href | string (URL) | — | URL (tampil saat htmlTag = a) |
hrefTarget | '_self'|'_blank' | "_self" | Target (tampil saat htmlTag = a) |
layoutMode | 'simple'|'advanced' | "simple" | — |
display | 'flex'|'grid'|'block'|'inline-block'|'inline'|'none' | "flex" | Display (tampil saat layoutMode = advanced) |
direction | enum | "column" | Direction (tampil saat layoutMode = advanced & display = flex & masonry ≠ true) |
flexWrap | 'nowrap'|'wrap'|'wrap-reverse' | "nowrap" | Flex Wrap (tampil saat layoutMode = advanced & display = flex & masonry ≠ true) |
alignSelf | 'flex-start'|'center'|'flex-end'|'stretch' | — | Align Self (tampil saat layoutMode = advanced & display = flex) |
justifyContent | 'flex-start'|'center'|'flex-end'|'space-between'|'space-around'|'space-evenly' | — | Align Main Axis (tampil saat layoutMode = advanced & display = flex & masonry ≠ true) |
alignItems | 'flex-start'|'center'|'flex-end'|'stretch'|'baseline' | — | Align Cross Axis (tampil saat layoutMode = advanced & display = flex & masonry ≠ true) |
gap | string | — | Gap (tampil saat display = grid & masonry ≠ true) |
gridTemplateColumns | string | — | Grid Template Columns (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
gridTemplateRows | string | — | Grid Template Rows (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoColumns | string | — | Grid Auto Columns (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoRows | string | — | Grid Auto Rows (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
gridAutoFlow | ''|'row'|'column'|'dense'|'row dense'|'column dense' | — | Grid Auto Flow (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
justifyItems | 'start'|'center'|'end'|'space-between'|'space-around'|'space-evenly' | — | Justify Items (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
alignItemsGrid | 'start'|'center'|'end'|'stretch'|'baseline' | — | Align Items (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
justifyContentGrid | 'start'|'center'|'end'|'space-between'|'space-around'|'space-evenly' | — | Justify Content (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
alignContent | 'start'|'center'|'end'|'stretch' | — | Align Content (tampil saat layoutMode = advanced & display = grid & masonry ≠ true) |
flexGrow | number (0–∞) | — | Grow (tampil saat layoutMode = advanced & display = flex) |
flexShrink | number (0–∞) | — | Shrink (tampil saat layoutMode = advanced & display = flex) |
flexBasis | string | — | Flex Basis (tampil saat layoutMode = advanced & display = flex) |
order | number | — | Order (tampil saat layoutMode = advanced & display ≠ none) |
Contoh
{
"id": "con01abc",
"type": "container",
"props": {},
"children": []
}