About
A lightweight flex layout container used by the engine's DomAdapter to arrange child elements in rows or columns.
Supports direction (row | column | none) and gap (any CSS gap value) attributes.
Children live in the light DOM for easy reparenting.
Column Direction (default)
Item 1
Item 2
Item 3
<ars-group direction="column" gap="12px">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</ars-group>
Row Direction
A
B
C
<ars-group direction="row" gap="16px">
<div style="flex:1">A</div>
<div style="flex:1">B</div>
<div style="flex:1">C</div>
</ars-group>
No Direction ("none")
Inline A
Inline B
<ars-group direction="none">…</ars-group>
Gap Values
gap 4px
gap 4px
gap 24px
gap 24px
<ars-group direction="row" gap="4px">…</ars-group>
<ars-group direction="row" gap="24px">…</ars-group>
Nested Groups
Row A-1
Row A-2
Row B-1
Row B-2
<ars-group direction="column" gap="12px">
<ars-group direction="row" gap="8px">
<div>Row A-1</div><div>Row A-2</div>
</ars-group>
<ars-group direction="row" gap="8px">
<div>Row B-1</div><div>Row B-2</div>
</ars-group>
</ars-group>
Theme Toggle
Usage
<ars-group direction="row" gap="16px">
<ars-button variant="primary">Save</ars-button>
<ars-button variant="secondary">Cancel</ars-button>
</ars-group>
<script type="module">
import { ArsGroup } from 'ars-web-components';
</script>