RemoteBox

RemoteBoxSample

@Sampled
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
@Composable
fun RemoteBoxSample() {
    RemoteBox(
        modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
        contentAlignment = RemoteAlignment.Center,
    ) {
        RemoteBox(modifier = RemoteModifier.size(100.rdp).background(Color.Blue.rc))
        RemoteText(text = "Centered".rs, color = Color.White.rc)
    }
}

RemoteBoxStackingSample

@Sampled
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
@Composable
fun RemoteBoxStackingSample() {
    // Outer box centered
    RemoteBox(
        modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
        contentAlignment = RemoteAlignment.Center,
    ) {
        // Red box (150dp) also centered in outer box
        // It aligns its own children to TopStart
        RemoteBox(
            modifier = RemoteModifier.size(150.rdp).background(Color.Red.rc),
            contentAlignment = RemoteAlignment.TopStart,
        ) {
            RemoteBox(modifier = RemoteModifier.size(50.rdp).background(Color.Yellow.rc))

            // Nested depth to show stacking within aligned container
            RemoteBox(
                modifier = RemoteModifier.size(30.rdp).background(Color.Black.rc),
                contentAlignment = RemoteAlignment.Center,
            ) {
                RemoteBox(modifier = RemoteModifier.size(10.rdp).background(Color.White.rc))
            }
        }

        // Green box (100dp) centered in outer box (overlaps Red)
        // It aligns its own children to BottomEnd
        RemoteBox(
            modifier = RemoteModifier.size(100.rdp).background(Color.Green.rc),
            contentAlignment = RemoteAlignment.BottomEnd,
        ) {
            RemoteBox(modifier = RemoteModifier.size(40.rdp).background(Color.Magenta.rc))
        }

        // Blue box (50dp) centered in outer box (overlaps Green)
        // It aligns its own children to Center
        RemoteBox(
            modifier = RemoteModifier.size(50.rdp).background(Color.Blue.rc),
            contentAlignment = RemoteAlignment.Center,
        ) {
            RemoteBox(modifier = RemoteModifier.size(20.rdp).background(Color.Cyan.rc))
        }
    }
}