spacedBy

Arranges the children of the container with a fixed space for both horizontal and vertical orientations. This function is marked as stable, ensuring that its result can be safely used in recompositions.

Important: As we use the CSS gap property to apply the spacing, negative spaces will be ignored.

Usage:

Column(
    verticalArrangement = Arrangement.spacedBy(space = 10.px),
) {
    SpanText("1")
    SpanText("2")
    SpanText("3")
}

The above code will generate the following html:

<div class="kobweb-col kobweb-arrange-spaced-by kobweb-arrange-start kobweb-align-start" style="--kobweb-arrange-spaced-by: 10px;">
    <span class="silk-span-text">1</span>
    <span class="silk-span-text">2</span>
    <span class="silk-span-text">3</span>
</div>

or

Row(
    horizontalArrangement = Arrangement.spacedBy(space = 10.px),
) {
    SpanText("1")
    SpanText("2")
    SpanText("3")
}

The above code will generate the following html:

<div class="kobweb-row kobweb-arrange-spaced-by kobweb-arrange-start kobweb-align-top" style="--kobweb-arrange-spaced-by: 10px;">
    <span class="silk-span-text">1</span>
    <span class="silk-span-text">2</span>
    <span class="silk-span-text">3</span>
</div>

Parameters

Arranges the children of the container with a fixed space for vertical orientations. An alignment can be specified to align the spaced children vertically inside the parent, in case there is height remaining.

This function is marked as stable, ensuring that its result can be safely used in recompositions.

Important: As we use the CSS gap property to apply the spacing, negative spaces will be ignored.

Usage:

Column(
    verticalArrangement = Arrangement.spacedBy(space = 10.px, alignment = Alignment.CenterVertically)),
) {
    SpanText("1")
    SpanText("2")
    SpanText("3")
}

The above code will generate the following html:

<div class="kobweb-col kobweb-arrange-spaced-by kobweb-arrange-center kobweb-align-start" style="--kobweb-arrange-spaced-by: 10px;">
    <span class="silk-span-text">1</span>
    <span class="silk-span-text">2</span>
    <span class="silk-span-text">3</span>
</div>

Note: When using:

• Alignment.CenterVertically, the kobweb-arrange-center class is placed together with kobweb-arrange-spaced-by

• Alignment.Top, the kobweb-arrange-top class is placed together with kobweb-arrange-spaced-by

• Alignment.Bottom, the kobweb-arrange-bottom class is placed together with kobweb-arrange-spaced-by

Parameters

See also

Arranges the children of the container with a fixed space for vertical orientations. An alignment can be specified to align the spaced children vertically inside the parent, in case there is width remaining.

This function is marked as stable, ensuring that its result can be safely used in recompositions.

Important: As we use the CSS gap property to apply the spacing, negative spaces will be ignored.

Usage:

Row(
    horizontalArrangement = Arrangement.spacedBy(space = 10.px, alignment = Alignment.CenterHorizontally),
) {
    SpanText("1")
    SpanText("2")
    SpanText("3")
}

The above code will generate the following html:

<div class="kobweb-row kobweb-arrange-spaced-by kobweb-arrange-center kobweb-align-top" style="--kobweb-arrange-spaced-by: 10px;">
    <span class="silk-span-text">1</span>
    <span class="silk-span-text">2</span>
    <span class="silk-span-text">3</span>
</div>

Note: When using:

• Alignment.CenterHorizontally, the kobweb-arrange-center class is placed together with kobweb-arrange-spaced-by

• Alignment.Start, the kobweb-arrange-start class is placed together with kobweb-arrange-spaced-by

• Alignment.End, the kobweb-arrange-end class is placed together with kobweb-arrange-spaced-by

Parameters

See also