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

TextOverlayCard

@Composable
fun TextOverlayCard(title: String, modifier: Modifier = Modifier, addon: TextOverlayAddon = TextOverlayAddon.None, mediaContainer: TextOverlayMediaContainer, titleSize: TextOverlayTitleSize = TextOverlayTitleSize.Regular, showArrow: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit)

The Text Overlay Card is a component that displays simple content and serves as an entry point to other pages containing more detailed information.

Parameters

title

Typically a short title or headline for the card.

modifier

The modifier to be applied to the card.

addon

Additional content to be displayed on the card, such as a badge or commercial message.

mediaContainer

The media container that holds the image content for the card.

titleSize

The size of the title text, which can be either regular or small.

showArrow

A boolean indicating whether to show an arrow icon on the card, typically used to indicate that the card is clickable or leads to more content.

interactionSource

The interaction source that will be used to handle interactions with the card, such as focus and hover states.

onClick

A lambda function that will be called when the card is clicked. This is where you can define the action to take when the card is interacted with.

See also

Samples

import android.content.res.Configuration
import android.widget.Toast
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.ExperimentalSkapaApi
import net.ikea.skapa.ui.components.BadgeColor
import net.ikea.skapa.ui.components.BadgeSize
import net.ikea.skapa.ui.components.BadgeVariant
import net.ikea.skapa.ui.components.TextOverlayAddon
import net.ikea.skapa.ui.components.TextOverlayCard
import net.ikea.skapa.ui.components.TextOverlayMediaContainer
import net.ikea.skapa.ui.components.TextOverlayTitleSize

fun main() { 
   //sampleStart 
   val context = LocalContext.current
val title = "Classic pieces with a modern twist but with sixty characters"

Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
    TextOverlayCard(
        title = title,
        modifier = Modifier.fillMaxWidth(),
        addon = TextOverlayAddon.Badge(variant = BadgeVariant.Text(label = "New card", size = BadgeSize.Small), color = BadgeColor.Green),
        mediaContainer = TextOverlayMediaContainer.Image(painter = painterResource(R.drawable.chair), contentDescription = ""),
        titleSize = TextOverlayTitleSize.Small,
        showArrow = true,
        onClick = {
            Toast.makeText(context, "TextOverlayCard clicked", Toast.LENGTH_SHORT).show()
        }
    )
} 
   //sampleEnd
}