Row
Basic horizontal layout container.
Usage Notes
- Use for button groups, toolbars, status indicator lines, and table header actions.
- Not suitable for vertical form fields (use
column) or equal-width card grids (usegrid). - Related components:
columnfor vertical layout,gridfor two-dimensional equal-width layout. - Children arrange at natural width; use
justifyto control distribution. - Use
gapto override the spacing between children; when omitted, the row keeps its theme CSS default.
Justify variants
namespace: "doc_row_justify_diff",
layout: {
"column:demo": {
"text:start": {
text: "justify: start"
},
"row:justify-start": {
justify: "start",
"badge:a": {
label: "A"
},
"badge:b": {
label: "B"
}
},
"text:center": {
text: "justify: center"
},
"row:justify-center": {
justify: "center",
"badge:a": {
label: "A"
},
"badge:b": {
label: "B"
}
},
"text:end": {
text: "justify: end"
},
"row:justify-end": {
justify: "end",
"badge:a": {
label: "A"
},
"badge:b": {
label: "B"
}
},
"text:space-between": {
text: "justify: space-between"
},
"row:justify-between": {
justify: "space-between",
"badge:a": {
label: "A"
},
"badge:b": {
label: "B"
}
}
}
}
}