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

PriceVariant

sealed class PriceVariant

Pre-defined styles for the Button component. There are three styles available: Regular, Comparison and BTI. Each style has its own unique characteristics.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Price
import net.ikea.skapa.ui.components.PriceSize
import net.ikea.skapa.ui.components.PriceSizeStyle
import net.ikea.skapa.ui.components.PriceVariant
import java.util.*

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    val currency = Currency.getInstance("EUR").symbol
    val integerValue = "1 000"
    val decimalValue = null
    val label = "/meter"

    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        // Standard
        Price(
            integerValue = integerValue,
            decimalValue = "50",
            currency = currency,
            variant = PriceVariant.Regular(),
            subscriptLabel = label
        )
        Price(
            integerValue = integerValue,
            decimalValue = decimalValue,
            currency = currency,
            variant = PriceVariant.Regular(),
            subscriptLabel = label,
            size = PriceSize.Small
        )

        // Comparison
        Price(
            integerValue = integerValue,
            decimalValue = decimalValue,
            currency = currency,
            variant = PriceVariant.Comparison(regularFontWeight = true, subtle = true),
            subscriptLabel = label,
            priceSizeStyle = PriceSizeStyle.SingleSize
        )

        // BTI
        Price(
            integerValue = integerValue,
            decimalValue = decimalValue,
            currency = currency,
            variant = PriceVariant.BTI,
            subscriptLabel = label
        )
    }
} 
   //sampleEnd
}

Inheritors

Types

Link copied to clipboard
data object BTI : PriceVariant

The BTI (Breath Taking Item) price display styling highlights the price in a BTI box. This styling can only be applied on the leading price variation.

Link copied to clipboard
class Comparison(strikeout: Boolean = true, regularFontWeight: Boolean = false, subtle: Boolean = false, negativePrice: Boolean = false) : PriceVariant

Comparison prices are used alongside an instance of a leading price. They are typically smaller than the leading price and can compare things like non-member prices (Normal price) or a movement from a previous price (Price strikeout).

Link copied to clipboard
class Regular(regularFontWeight: Boolean = false, subtle: Boolean = false, negativePrice: Boolean = false) : PriceVariant

This is the leading price display used for most price presentations at IKEA. The price display has two style variations called PriceSizeStyle.MixedSize Size and PriceSizeStyle.SingleSize.