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 default behavior of PriceVariant.Comparison displays the Price strikeout style. To display the Normal price variation, you must provide PriceVariant.strikeout and PriceVariant.regularFontWeight as false.
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.
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.
Decimal sign for Price.
PriceSize to define the Price size.PriceSize.Small enforces a PriceSizeStyle.SingleSize for the price.
PriceVariant defines the Price style. The default value is PriceVariant.Regular.
CurrencyPosition indicates where currency will be displayed.
The price size style variations to be displayed. The default value is PriceSizeStyle.MixedSize.
Subscript label defined after decimals and currency.
Modifier to be applied to the Price.
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.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
}