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

ListViewItem

@Composable
fun ListViewItem(title: String, modifier: Modifier = Modifier, description: String? = null, leadingImage: ListViewItemImage = ListViewItemImage.None, trailingControl: ListViewItemControls = ListViewItemControls.None, quantityLabel: String?, addons: @Composable () -> Unit? = null, size: ListViewItemSize = ListViewItemSize.Medium, contentHorizontalPadding: Dp = SkapaSpacing.space150, textStyle: ListViewItemTextStyle = ListViewItemTextStyle.Regular, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit?)

List View Item consists of one or more items and can contain actions represented by Icons and text. The List View Item is available in three sizes. Small for one line text, medium and large.

Present your lists in a way that makes it easy to identify a specific item in a collection and take action. Always present Icons, text and actions in a uniform format.

Parameters

title

The primary text of the list view item

modifier

Modifier to be applied to the list view item

description

The secondary text of the list view item is usually used as an item description.

leadingImage

The leading supporting visual of the list view item

trailingControl

The trailing control, icon, switch, checkbox or radiobutton.

quantityLabel

The trailing meta text to display a quantity of the item.

addons

Extra addons to be displayed under the item description.

size

ListViewItemSize defines the minimum height of the list view item.

contentHorizontalPadding

The padding applied to the content of this menu item.

textStyle

dictates whether the title is regular with ListViewItemTextStyle.Regular and bold with ListViewItemTextStyle.Emphasised.

enabled

whether the component is enabled or grayed out.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component.

onClick

will be called when the user clicks on the list view item

See also

Samples

import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ClipboardManager
import androidx.compose.ui.platform.LocalClipboardManager
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.AvatarStyle
import net.ikea.skapa.ui.components.AvatarVariant
import net.ikea.skapa.ui.components.Divider
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.ListViewItemControls
import net.ikea.skapa.ui.components.ListViewItemImage
import net.ikea.skapa.ui.components.ListViewItemSize
import net.ikea.skapa.ui.components.ListViewItemTextStyle

fun main() { 
   //sampleStart 
   val sizes = listOf(ListViewItemSize.Small, ListViewItemSize.Medium, ListViewItemSize.Large)
val title = "Title"
val description = "Description here"
val context = LocalContext.current
val clipboardManager: ClipboardManager = LocalClipboardManager.current
val descriptionToCopy = "1234567890"
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        sizes.map { size ->
            Text(size.name, fontWeight = FontWeight.Bold, modifier = Modifier.padding(vertical = 10.dp))
            Divider()
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Emphasised) {}
            ListViewItem(title = title, description = description, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(
                title = title,
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Icon(R.drawable.ic_switch_checkmark, null)
            ) {}
            if (size != ListViewItemSize.Small) {
                ListViewItem(
                    title = "$title Image",
                    description = description,
                    size = size,
                    textStyle = ListViewItemTextStyle.Regular,
                    leadingImage = ListViewItemImage.ImageView(painterResource(R.drawable.ic_button_danger), null)
                ) {}
            }
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                quantityLabel = "(30)",
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.RadioButton(true)
            ) {}
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.Arrow
            ) {}
            ListViewItem(
                title = "$title",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.LinkOut("Open in browser")
            ) {}
            ListViewItem(
                title = "Copy",
                description = descriptionToCopy,
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.Copy("Copy number"),
                onClick = {
                    clipboardManager.setText(AnnotatedString(descriptionToCopy))
                    Toast.makeText(context, "$descriptionToCopy has been copied", Toast.LENGTH_LONG).show()
                }
            )
            ListViewItem(
                title = "Avatar Image",
                description = description,
                // List view item size maps automatically to avatar size ListViewItemSize -> AvatarSize
                // Small -> XSmall, Medium -> Small, Large -> Medium (56px until we have a 48px size avatar)
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Avatar(
                    // Check avatar documentation for more details on Variant, Style and Static params
                    variant = AvatarVariant.Text("AI"),
                    style = AvatarStyle.Secondary
                ),
                onClick = { /* Do something*/ }
            )
        }
    }
} 
   //sampleEnd
}
@Composable
fun ListViewItem(title: String, modifier: Modifier = Modifier, description: String? = null, leadingImage: ListViewItemImage = ListViewItemImage.None, trailingControl: ListViewItemControls = ListViewItemControls.None, quantityLabel: @Composable () -> Unit? = null, addons: @Composable () -> Unit? = null, size: ListViewItemSize = ListViewItemSize.Medium, contentHorizontalPadding: Dp = SkapaSpacing.space150, textStyle: ListViewItemTextStyle = ListViewItemTextStyle.Regular, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit?)

List View Item consists of one or more items and can contain actions represented by Icons and text. The List View Item is available in three sizes. Small for one line text, medium and large.

Present your lists in a way that makes it easy to identify a specific item in a collection and take action. Always present Icons, text and actions in a uniform format.

Parameters

title

The primary text of the list view item

modifier

Modifier to be applied to the list view item

description

The secondary text of the list view item is usually used as an item description.

leadingImage

The leading supporting visual of the list view item

trailingControl

The trailing control, icon, switch, checkbox or radiobutton.

quantityLabel

The trailing components that complement the item information.

addons

Extra addons to be displayed under the item description.

size

ListViewItemSize defines the minimum height of the list view item.

contentHorizontalPadding

The padding applied to the content of this menu item.

textStyle

dictates whether the title is regular with ListViewItemTextStyle.Regular and bold with ListViewItemTextStyle.Emphasised.

enabled

whether the component is enabled or grayed out.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component.

onClick

will be called when the user clicks on the list view item

See also

Samples

import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ClipboardManager
import androidx.compose.ui.platform.LocalClipboardManager
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.AvatarStyle
import net.ikea.skapa.ui.components.AvatarVariant
import net.ikea.skapa.ui.components.Divider
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.ListViewItemControls
import net.ikea.skapa.ui.components.ListViewItemImage
import net.ikea.skapa.ui.components.ListViewItemSize
import net.ikea.skapa.ui.components.ListViewItemTextStyle

fun main() { 
   //sampleStart 
   val sizes = listOf(ListViewItemSize.Small, ListViewItemSize.Medium, ListViewItemSize.Large)
val title = "Title"
val description = "Description here"
val context = LocalContext.current
val clipboardManager: ClipboardManager = LocalClipboardManager.current
val descriptionToCopy = "1234567890"
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        sizes.map { size ->
            Text(size.name, fontWeight = FontWeight.Bold, modifier = Modifier.padding(vertical = 10.dp))
            Divider()
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Emphasised) {}
            ListViewItem(title = title, description = description, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(
                title = title,
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Icon(R.drawable.ic_switch_checkmark, null)
            ) {}
            if (size != ListViewItemSize.Small) {
                ListViewItem(
                    title = "$title Image",
                    description = description,
                    size = size,
                    textStyle = ListViewItemTextStyle.Regular,
                    leadingImage = ListViewItemImage.ImageView(painterResource(R.drawable.ic_button_danger), null)
                ) {}
            }
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                quantityLabel = "(30)",
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.RadioButton(true)
            ) {}
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.Arrow
            ) {}
            ListViewItem(
                title = "$title",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.LinkOut("Open in browser")
            ) {}
            ListViewItem(
                title = "Copy",
                description = descriptionToCopy,
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.Copy("Copy number"),
                onClick = {
                    clipboardManager.setText(AnnotatedString(descriptionToCopy))
                    Toast.makeText(context, "$descriptionToCopy has been copied", Toast.LENGTH_LONG).show()
                }
            )
            ListViewItem(
                title = "Avatar Image",
                description = description,
                // List view item size maps automatically to avatar size ListViewItemSize -> AvatarSize
                // Small -> XSmall, Medium -> Small, Large -> Medium (56px until we have a 48px size avatar)
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Avatar(
                    // Check avatar documentation for more details on Variant, Style and Static params
                    variant = AvatarVariant.Text("AI"),
                    style = AvatarStyle.Secondary
                ),
                onClick = { /* Do something*/ }
            )
        }
    }
} 
   //sampleEnd
}
@Composable
fun ListViewItem(title: @Composable () -> Unit, modifier: Modifier = Modifier, description: @Composable () -> Unit? = null, leading: @Composable RowScope.() -> Unit? = null, trailing: @Composable RowScope.() -> Unit? = null, addons: @Composable () -> Unit? = null, size: ListViewItemSize = ListViewItemSize.Medium, contentHorizontalPadding: Dp = SkapaSpacing.space150, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit?)

List View Item consist of one or more items and can contain actions represented by Icons and text. The List View Item is available in three sizes. Small for one line text, medium and large.

Present your lists in a way that makes it easy to identify a specific item in a collection and take action. Always present Icons, text and actions in a uniform format.

This function provides the backbone to create a List View Item using custom Composables. For most of the cases we recommend using the ListViewItem without Composables instead of this function.

Parameters

title

The primary text of the list view item

modifier

Modifier to be applied to the list view item

description

The secondary text of the list view item is usually used as an item description.

leading

The leading supporting visual of the list view item

trailing

The trailing meta text, icon, switch, checkbox or radiobutton.

addons

Extra addons to be displayed under the item description.

size

ListViewItemSize defines the minimum height of the list view item.

contentHorizontalPadding

The padding applied to the content of this menu item

enabled

whether the component is enabled or grayed out.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this component.

onClick

will be called when the user clicks on the list view item

See also

Samples

import android.widget.Toast
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ClipboardManager
import androidx.compose.ui.platform.LocalClipboardManager
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.AvatarStyle
import net.ikea.skapa.ui.components.AvatarVariant
import net.ikea.skapa.ui.components.Divider
import net.ikea.skapa.ui.components.ListViewItem
import net.ikea.skapa.ui.components.ListViewItemControls
import net.ikea.skapa.ui.components.ListViewItemImage
import net.ikea.skapa.ui.components.ListViewItemSize
import net.ikea.skapa.ui.components.ListViewItemTextStyle

fun main() { 
   //sampleStart 
   val sizes = listOf(ListViewItemSize.Small, ListViewItemSize.Medium, ListViewItemSize.Large)
val title = "Title"
val description = "Description here"
val context = LocalContext.current
val clipboardManager: ClipboardManager = LocalClipboardManager.current
val descriptionToCopy = "1234567890"
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        sizes.map { size ->
            Text(size.name, fontWeight = FontWeight.Bold, modifier = Modifier.padding(vertical = 10.dp))
            Divider()
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(title = title, size = size, textStyle = ListViewItemTextStyle.Emphasised) {}
            ListViewItem(title = title, description = description, size = size, textStyle = ListViewItemTextStyle.Regular) {}
            ListViewItem(
                title = title,
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Icon(R.drawable.ic_switch_checkmark, null)
            ) {}
            if (size != ListViewItemSize.Small) {
                ListViewItem(
                    title = "$title Image",
                    description = description,
                    size = size,
                    textStyle = ListViewItemTextStyle.Regular,
                    leadingImage = ListViewItemImage.ImageView(painterResource(R.drawable.ic_button_danger), null)
                ) {}
            }
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                quantityLabel = "(30)",
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.RadioButton(true)
            ) {}
            ListViewItem(
                title = "$title PaymentLogo",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.PaymentLogo(painterResource(id = R.drawable.ic_switch_checkmark), null),
                trailingControl = ListViewItemControls.Arrow
            ) {}
            ListViewItem(
                title = "$title",
                description = description,
                size = size,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.LinkOut("Open in browser")
            ) {}
            ListViewItem(
                title = "Copy",
                description = descriptionToCopy,
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                trailingControl = ListViewItemControls.Copy("Copy number"),
                onClick = {
                    clipboardManager.setText(AnnotatedString(descriptionToCopy))
                    Toast.makeText(context, "$descriptionToCopy has been copied", Toast.LENGTH_LONG).show()
                }
            )
            ListViewItem(
                title = "Avatar Image",
                description = description,
                // List view item size maps automatically to avatar size ListViewItemSize -> AvatarSize
                // Small -> XSmall, Medium -> Small, Large -> Medium (56px until we have a 48px size avatar)
                size = ListViewItemSize.Medium,
                textStyle = ListViewItemTextStyle.Regular,
                leadingImage = ListViewItemImage.Avatar(
                    // Check avatar documentation for more details on Variant, Style and Static params
                    variant = AvatarVariant.Text("AI"),
                    style = AvatarStyle.Secondary
                ),
                onClick = { /* Do something*/ }
            )
        }
    }
} 
   //sampleEnd
}