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

AspectRatioBox

@Composable
fun AspectRatioBox(aspectRatio: SkapaAspectRatio, contentAlignment: Alignment, modifier: Modifier = Modifier, propagateMinConstraints: Boolean = false, 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.

contentAlignment

The alignment of the content inside the AspectRatioBox.

modifier

Modifier to be applied to the AspectRatioBox.

propagateMinConstraints

Whether the incoming min constraints should be passed to content.

content

The content of the AspectRatioBox.

See also

@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