Design/net.ikea.skapa.ui.components/AspectRatioBox

AspectRatioBox

@Composable
fun AspectRatioBox(aspectRatio: SkapaAspectRatio, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.Center, propagateMinConstraints: Boolean = false, background: Color = SkapaTheme.colors.neutral2, content: @Composable BoxScope.() -> Unit)

A wrap box container for presenting visual media, in Skapa standardised aspect ratios

Example of usage


This function uses Coil to create a Skapa Image Component using SkapaImage object 

import coil.compose.AsyncImagePainter
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import net.ikea.skapa.ui.components.AspectRatioBox
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.SkapaImage

@Composable
@OptIn(ExperimentalSkapaApi::class)
private fun SkapaImageCoilWrapper(imgUrl: String?) {
   val painter = rememberAsyncImagePainter(
       model = ImageRequest.Builder(LocalContext.current)
                  .data(imgUrl)
                  .error(SkapaImage.Error)
                  .fallback(SkapaImage.Fallback)
                  .build()
              )

   val aspectRatioModifier =
   if (painter.state is AsyncImagePainter.State.Success) Modifier.aspectRatio(SkapaAspectRatio.Ratio16by9.value) else Modifier

   AspectRatioBox(
      aspectRatio = SkapaAspectRatio.Ratio16by9,
      ) {
         Image(
            painter = painter,
            contentScale = ContentScale.Crop,
            contentDescription = "coil",
            modifier = Modifier
                          .align(Alignment.Center)
                          .then(aspectRatioModifier)
         )
}
Content copied to clipboard

Parameters

aspectRatio

The aspect ratio you want to box the content with.

modifier

Modifier to be applied to the AspectRatioBox.

contentAlignment

The alignment of the content inside the AspectRatioBox. The default is Alignment.Center.

propagateMinConstraints

Whether the incoming min constraints should be passed to content.

background

The background color of the AspectRatioBox. Default is SkapaTheme.colors.neutral2.

content

The content of the AspectRatioBox.

See also