core/com.orange.ouds.core.component/OudsListItem

OudsListItem

fun OudsListItem(label: String, modifier: Modifier = Modifier, verticalAlignment: OudsListItemVerticalAlignment = OudsListItemDefaults.VerticalAlignment, overline: String? = null, extraLabel: String? = null, description: String? = null, leading: OudsListItemLeading? = null, trailing: OudsListItemTrailing? = null, divider: Boolean = true, background: Boolean = false, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Static list item displays non-clickable information in a structured format. They are designed to be stacked within a list, with no spacing between the elements.

A static list item can be used to present read-only information such as contact details, product specifications, or settings values. These items are designed to be stacked within a list, with no spacing between the elements.

Parameters

label

The main label of the list item.

modifier

Modifier applied to the layout of the list item.

verticalAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.

overline

Optional text displayed above the label.

extraLabel

Optional strong accompanying label for the main label, displayed between the label and the description.

description

Optional text displayed below the label and extraLabel.

leading

Optional leading content such as an icon or image displayed at the start of the list item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the list item.

divider

Controls the display of a divider at the bottom of the list item. Defaults to true.

background

Controls whether the list item has a background color. Defaults to false.

helperText

Optional helper text displayed below the list item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the list item. When false, the content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.

Samples

Column {
    OudsListItem(
        label = "Name",
        description = "John Doe",
        leading = OudsListItemLeading.Icon(
            imageVector = Icons.Outlined.Person,
            contentDescription = "Person icon"
        )
    )
    OudsListItem(
        label = "Email",
        description = "john.doe@example.com",
        leading = OudsListItemLeading.Icon(
            imageVector = Icons.Outlined.Email,
            contentDescription = "Email icon"
        )
    )
    OudsListItem(
        label = "Phone",
        description = "+33 6 12 34 56 78",
        leading = OudsListItemLeading.Icon(
            imageVector = Icons.Outlined.Phone,
            contentDescription = "Phone icon"
        )
    )
}

OudsListItem(
    overline = "Overline text",
    label = "Main label",
    extraLabel = "Extra label",
    description = "This is a description that provides additional context.",
    leading = OudsListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
    helperText = "Helper text appears below the item",
    boldLabel = true,
    background = true,
    divider = true
)

OudsListItem(
    label = "Product name",
    description = "Product description with details",
    leading = OudsListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Product image",
        size = OudsListItemImageSize.Large,
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsListItemTrailing.Text(label = "€29.99", style = OudsListItemTextStyle.Label)
)

OudsListItem(
    label = "Favorites",
    description = "View your favorite items",
    leading = OudsListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Favorites icon",
        tinted = false
    )
)

@Composable

fun OudsListItem(label: String, onClick: () -> Unit, modifier: Modifier = Modifier, indicator: OudsListItemIndicator = OudsListItemDefaults.Indicator, verticalAlignment: OudsListItemVerticalAlignment = OudsListItemDefaults.VerticalAlignment, overline: String? = null, extraLabel: String? = null, description: String? = null, leading: OudsListItemLeading? = null, trailing: OudsListItemTrailing? = null, divider: Boolean = true, background: Boolean = false, helperText: String? = null, boldLabel: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null)

TODO update description when available and add version and guideline link

Navigation list item allows users to navigate to another screen or perform an action. They are designed to be stacked within a list, with no spacing between the elements.

A navigation list item is clickable and typically includes a navigation indicator. It can be used for menu items, settings options, or any interactive list that leads to another destination. The indicator type can be customized to show forward navigation, backward navigation, or external links. These items are designed to be stacked within a list, with no spacing between the elements.

Parameters

label

The main label of the list item.

onClick

Callback invoked when the list item is clicked.

modifier

Modifier applied to the layout of the list item.

indicator

The navigation indicator to display. Defaults to OudsListItemIndicator.Next.

verticalAlignment

Controls the vertical alignment of the content. Defaults to OudsListItemVerticalAlignment.CenterVertically.

overline

Optional text displayed above the label.

extraLabel

Optional strong accompanying label for the main label, displayed between the label and the description.

description

Optional text displayed below the label and extraLabel.

leading

Optional leading content such as an icon or image displayed at the start of the list item.

trailing

Optional trailing content such as an icon, image, or text displayed at the end of the list item.

divider

Controls the display of a divider at the bottom of the list item. Defaults to true.

background

Controls whether the list item has a background color. Defaults to false.

helperText

Optional helper text displayed below the list item.

boldLabel

Controls whether the label text is displayed in bold. Defaults to false.

enabled

Controls the enabled state of the list item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting interactions for this list item.

Samples

Column {
    OudsListItem(
        label = "Back to previous screen",
        onClick = { /* Navigate back */ },
        indicator = OudsListItemIndicator.Previous
    )
    OudsListItem(
        label = "Go to next screen",
        onClick = { /* Navigate forward */ },
        indicator = OudsListItemIndicator.Next
    )
    OudsListItem(
        label = "Open external link",
        onClick = { /* Open browser */ },
        indicator = OudsListItemIndicator.External
    )
}

OudsListItem(
    overline = "Overline text",
    label = "Main label",
    extraLabel = "Extra label",
    description = "This is a description that provides additional context.",
    leading = OudsListItemLeading.Icon(
        imageVector = Icons.Outlined.Favorite,
        contentDescription = "Favorite icon"
    ),
    trailing = OudsListItemTrailing.Text(label = "99+", style = OudsListItemTextStyle.Label),
    helperText = "Helper text appears below the item",
    boldLabel = true,
    background = true,
    divider = true
)

OudsListItem(
    label = "Product name",
    description = "Product description with details",
    leading = OudsListItemLeading.Image(
        painter = CheckerboardPainter,
        contentDescription = "Product image",
        size = OudsListItemImageSize.Large,
        ratio = OudsListItemImageRatio.Square
    ),
    trailing = OudsListItemTrailing.Text(label = "€29.99", style = OudsListItemTextStyle.Label)
)

OudsListItem(
    label = "Favorites",
    description = "View your favorite items",
    leading = OudsListItemLeading.Icon(
        painter = rememberRainbowHeartPainter(),
        contentDescription = "Favorites icon",
        tinted = false
    )
)

OudsListItem

Parameters

See also

Samples

Parameters

See also

Samples