Price
Price displays a currency in the IKEA price presentation brand format.
PriceVariant.Regular is the leading price used for most price presentations at IKEA.
PriceVariant.Comparison 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). The Price is always displayed in strikeout style.
The PriceVariant.BTI (Breath Taking Item) price display styling highlights the price in a BTI box. This styling can only be applied to the leading price variation.
PriceVariant.TimeRestrictedOffer Used by TimeRestrictedOffer in PriceModule to display the current price in red colour.
Example of usage:
Parameters
Integer value for Price, will render as provided.
Decimal value for Price.
String used for currency. Use a String or Currency.getInstance(<currencyCode>).symbol. Note: If you need to have a LTR view together with a RTL currency, you can use need to use the LRM mark (\u200E) to ensure the currency is displayed correctly for leading or trailing position. Eg. (\uFDFC\u200E) // Arabic Riyal symbol + LRM mark.
Modifier to be applied to the Price.
Decimal sign for Price.
PriceSize to define the Price size.PriceSize.Small enforces a PriceSizeStyle.FixedSize for the price.
PriceVariant defines the Price style. The default value is PriceVariant.Regular.
CurrencyPosition indicates where currency will be displayed.
Subscript label defined after decimals and currency.
AffixVerticalAlignment allow you to place decimals value aligned Top or Bottom (same baseline as price)
AffixVerticalAlignment allow you to place currency value aligned Top or Bottom (same baseline as price)
String to be used as a prefix for screen readers (Talkback) to describe the price.
String to be used as a suffix for screen readers (Talkback) to describe the price.
Optional space added between the currency and price digits.
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.PriceVariant
import java.util.*
fun main() {
//sampleStart
SkapaTheme2(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(),
subscriptLabel = label
)
// BTI
Price(
integerValue = integerValue,
decimalValue = decimalValue,
currency = currency,
variant = PriceVariant.BTI(),
subscriptLabel = label
)
}
}
//sampleEnd
}Deprecated (with error)
This function is deprecated, use the new Price function instead. The priceSizeStyle parameter has been moved inside of the PriceVariants.
Replace with
Price(integerValue = integerValue, decimalValue = decimalValue, currency = currency, decimalSign = decimalSign, size = size, variant = variant /* TODO: priceSizeStyle has moved inside of most variants */, currencyPosition = currencyPosition, subscriptLabel = subscriptLabel, modifier = modifier, decimalVerticalAlignment = decimalVerticalAlignment, currencyVerticalAlignment = currencyVerticalAlignment, captionPrefix = captionPrefix, captionSuffix = captionSuffix, currencySpacing = currencySpacing)