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

OudsBulletList

fun OudsBulletList(modifier: Modifier = Modifier, type: OudsBulletListType = OudsBulletListDefaults.Type, textStyle: OudsBulletListTextStyle = OudsBulletListDefaults.TextStyle, @IntroducedAt(version = "2.3.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

An optional skeleton that improves the perceived loading time by providing a visual cue of where the component will appear once fully loaded. 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")
                }
            }
        )
    }
}