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

MemberCard

@Composable
fun MemberCard(title: String, name: String, number: String, caption: String?, modifier: Modifier = Modifier, styleParams: MemberCardStyleParams = MemberCardStyleParams(), actionParams: MemberCardActionParams? = null, codeContent: @Composable () -> Unit)

MemberCard component allows us to expand our relation with our customers, displaying their physical IKEA Member Card in a digital format and comes with predefined appearance based on Skapa design and guidelines.

The main use case for this component is scanning a Member Card number at the retail point of sale when it is displayed on the customer's mobile device.

Keep in mind that this version of IKEA Member Card does not support barcodes, only QR codes.

Parameters

title

Text to discern card type.

name

Text containing name of card holder.

number

Text containing unique card number.

caption

Optional text containing additional information to be displayed under card holder name.

modifier

Modifier to be applied outside the component.

styleParams

Defines MemberCardStyleParams. If set, changes the visual style of the component. Default value set to MemberCardStyleParams. The default value is MemberCardProgram.Family.

actionParams

Defines MemberCardActionParams. If set, displays a small Icon button in the top-end corner of the component. MemberCardActionParams handles which icon to be displayed through ActionIcon enum, the action of the button, and the content description. See ActionIcon for allowed icons. Default value set to null.

codeContent

The scannable content. Can pass any composable content, keep in mind the container is constrained to specific code style sizes. For example, as we only currently support QR codes, the container is 83.dp x 83.dp in MemberCardOrientation.Horizontal and 128.dp x 128.dp in MemberCardOrientation.Vertical.

Example of usage:

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.ActionIcon
import net.ikea.skapa.ui.components.MemberCard
import net.ikea.skapa.ui.components.MemberCardActionParams
import net.ikea.skapa.ui.components.MemberCardCodeType
import net.ikea.skapa.ui.components.MemberCardOrientation
import net.ikea.skapa.ui.components.MemberCardProgram
import net.ikea.skapa.ui.components.MemberCardStyleParams

fun main() { 
   //sampleStart 
   SkapaTheme2(isSystemInDarkTheme()) {
    MemberCard(
        // User information to be displayed in the card
        title = "IKEA Family",
        name = "User Name",
        caption = "Additional information",
        number = "6275980385009143315",
        // Card styling - program, orientation and code type
        styleParams = MemberCardStyleParams(
            program = MemberCardProgram.Family,
            orientation = MemberCardOrientation.Horizontal,
            codeType = MemberCardCodeType.QR
        ),
        // Card action and functionality
        actionParams = MemberCardActionParams(
            actionIcon = ActionIcon.FullScreen,
            contentDescription = "content description",
            onClick = { /* Add expand action onClick logic here */ }
        ),
        // Container for the QR code, set to fixed 1:1 aspect ratio
        codeContent = { /* Add scannable composable here. I.e QR code */ }
    )
} 
   //sampleEnd
}