core/com.orange.ouds.core.component/OudsBulletList

OudsBulletList

fun OudsBulletList(modifier: Modifier = Modifier, type: OudsBulletListType = OudsBulletListDefaults.Type, textStyle: OudsBulletListTextStyle = OudsBulletListDefaults.TextStyle, @IntroducedAt(version = "3.0.0-Unreleased") skeleton: OudsSkeleton? = LocalSkeleton.current, builder: OudsBulletListBuilder.() -> Unit)

Bullet list is a UI element that helps to view in related individual text items grouped together; items usually starting with a number or a bullet.

Bullet list is also known as “Unordered list” or “Ordered list” and is not an interactive element by default, although text items can support hypertext links.

Design

Name	Bullet List
Guidelines	unified-design-system.orange.com
Version	1.1.0

Parameters

modifier

Modifier applied to the list.

type

The visual type of the list (e.g., ordered, unordered, bare). See OudsBulletListType.

textStyle

The typography style for the list items. See OudsBulletListTextStyle.

builder

A lambda scope using the OudsBulletListBuilder to define the list items.

skeleton

A placeholder state of the component used when the content is not yet available (while loading). The component shows the correct visual structure but with placeholder elements (grey or shimmering blocks) instead of actual content. Can be set directly or inherited from OudsSkeletonProvider. See OudsSkeleton class documentation for all approaches.

Samples

OudsBulletList {
    item(label = "Milk")
    item(label = "Vegetables", subListType = OudsBulletListType.Unordered(brandColor = false)) {
        item(label = "Tomatoes")
        item(
            label = "Salad",
            subListTextStyle = OudsBulletListTextStyle(
                fontSize = OudsBulletListFontSize.BodyLarge,
                fontWeight = OudsBulletListFontWeight.Normal
            )
        ) {
            item(label = "Lettuce")
            item(label = "Arugula")
        }
    }
}

OudsBulletList(type = OudsBulletListType.Ordered) {
    item(label = "Prepare the ingredients")
    item(label = "Cook the pasta") {
        item(label = "Boil water in a large pot")
        item(
            label = "Add salt and then the pasta",
            subListTextStyle = OudsBulletListTextStyle(
                fontSize = OudsBulletListFontSize.BodyLarge,
                fontWeight = OudsBulletListFontWeight.Normal
            )
        ) {
            item(label = "Cook for 8-10 minutes")
            item(label = "Stir occasionally")
        }
    }
    item(label = "Drain the pasta and serve")
}

OudsBulletList(type = OudsBulletListType.Bare) {
    item(label = "Event Planning")
    item(
        label = "Logistic Team",
        subListTextStyle = OudsBulletListTextStyle(
            fontSize = OudsBulletListFontSize.BodyLarge,
            fontWeight = OudsBulletListFontWeight.Normal
        )
    ) {
        item(label = "Venue Booking")
        item(label = "Catering")
    }
    item(
        label = "Communication Team",
        subListTextStyle = OudsBulletListTextStyle(
            fontSize = OudsBulletListFontSize.BodyLarge,
            fontWeight = OudsBulletListFontWeight.Normal
        )
    ) {
        item(label = "Invitations")
        item(label = "Social Media")
    }
}

OudsBulletList(
    textStyle = OudsBulletListTextStyle(
        fontSize = OudsBulletListFontSize.BodyLarge,
        fontWeight = OudsBulletListFontWeight.Normal
    )
) {
    item(
        label = buildOudsAnnotatedBulletListLabel {
            withStrong { append("Important notice:") }
            append(" Read the following information carefully")
        })
    item(
        label = buildOudsAnnotatedBulletListLabel {
            append("Product details available on our ")
            withLink(OudsLinkAnnotation.Url("https://example.com/products")) {
                append("website")
            }
        }
    ) {
        item(
            label = buildOudsAnnotatedBulletListLabel {
                withStrong { append("Features:") }
                append(" See complete specifications")
            }
        )
        item(
            label = buildOudsAnnotatedBulletListLabel {
                append("For technical support, ")
                withLink(OudsLinkAnnotation.Url("https://support.example.com")) {
                    append("click here")
                }
            }
        )
    }
}