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

AspectRatioBox

@Composable
fun AspectRatioBox(aspectRatio: SkapaAspectRatio, modifier: Modifier = Modifier, 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.Wide.value) else Modifier

   AspectRatioBox(
      aspectRatio = SkapaAspectRatio.Wide,
      ) {
         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

propagateMinConstraints

Whether the incoming min constraints should be passed to content

background

the Color to paint background

content

The content of the AspectRatioBox

See also