OudsSmallListItem
TODO update description when available and add version and guideline link
Static small list item displays non-clickable information in a compact format.
A static small list item provides a condensed way to present read-only information. It is ideal for compact lists, quick settings displays, or dense information layouts. Unlike the standard list item, it omits overline and extra label to maintain a smaller footprint. These items are designed to be stacked within a list, with no spacing between the elements.
Parameters
The main label of the small list item.
Modifier applied to the layout of the small list item.
Controls the vertical alignment of the content. Defaults to OudsListItemContentAlignment.Center.
Optional text displayed below the label.
Optional leading content such as an icon or image displayed at the start of the small list item.
Optional trailing content such as an icon, image, or text displayed at the end of the small list item.
Controls the display of a divider at the bottom of the small list item. Defaults to true.
Controls whether the small list item has a background color. Defaults to true.
Optional helper text displayed below the small list item.
Controls whether the label text is displayed in bold. Defaults to false.
Controls the enabled state of the small list item. When false, the content is displayed in a disabled state. Defaults to true.
See also
If you need spaced items displayed in a card format (with background or outlined).
Samples
Column {
OudsSmallListItem(
label = "Notifications",
description = "Push notifications enabled",
leading = OudsSmallListItemLeading.Icon(
imageVector = Icons.Outlined.Notifications,
contentDescription = "Notifications icon"
)
)
OudsSmallListItem(
label = "Share",
description = "Share app with friends",
leading = OudsSmallListItemLeading.Icon(
imageVector = Icons.Outlined.Share,
contentDescription = "Share icon"
)
)
OudsSmallListItem(
label = "Settings",
description = "App preferences",
leading = OudsSmallListItemLeading.Icon(
imageVector = Icons.Outlined.Settings,
contentDescription = "Settings icon"
)
)
}OudsSmallListItem(
label = "Compact view",
description = "Quick access to content",
leading = OudsSmallListItemLeading.Image(
painter = CheckerboardPainter,
contentDescription = "Content image",
format = OudsListItemImageFormat.Square
),
trailing = OudsSmallListItemTrailing.Text(label = "New", style = OudsListItemTextStyle.LabelStrong)
)OudsSmallListItem(
label = "Premium features",
description = "Unlock exclusive content",
leading = OudsSmallListItemLeading.Icon(
painter = rememberRainbowHeartPainter(),
contentDescription = "Premium icon",
tinted = false
)
)TODO update description when available and add version and guideline link
Navigation small list item allows users to navigate to another screen or perform an action in a compact format.
A navigation small list item is clickable and provides a condensed way to navigate. It is ideal for compact menus, quick settings with actions, or dense navigation lists. The indicator type can be customized to show forward navigation, backward navigation, or external links. Unlike the standard list item, it omits overline and extra label to maintain a smaller footprint while remaining interactive. These items are designed to be stacked within a list, with no spacing between the elements.
Parameters
The main label of the small list item.
Modifier applied to the layout of the small list item.
Callback invoked when the small list item is clicked.
The navigation indicator to display. Defaults to OudsListItemDefaults.Indicator (Next).
Controls the vertical alignment of the content. Defaults to OudsListItemDefaults.ContentAlignment.
Optional text displayed below the label.
Optional leading content such as an icon or image displayed at the start of the small list item.
Optional trailing content such as an icon, image, or text displayed at the end of the small list item.
Controls the display of a divider at the bottom of the small list item. Defaults to true.
Controls whether the small list item has a background color. Defaults to false.
Optional helper text displayed below the small list item.
Controls whether the label text is displayed in bold. Defaults to false.
Controls the enabled state of the small list item. When false, the item is not clickable and content is displayed in a disabled state. Defaults to true.
Optional hoisted MutableInteractionSource for observing and emitting interactions for this small list item.
See also
If you need spaced items displayed in a card format (with background or outlined).
Samples
val options = listOf("General", "Privacy", "Notifications", "About")
var selectedOption by rememberSaveable { mutableStateOf(options.first()) }
Column {
options.forEach { option ->
OudsSmallListItem(
label = option,
onClick = { selectedOption = option },
indicator = OudsListItemIndicator.Next,
background = option == selectedOption
)
}
}Column {
OudsSmallListItem(
label = "Go back",
onClick = { /* Navigate back */ },
indicator = OudsListItemIndicator.Previous
)
OudsSmallListItem(
label = "Continue",
onClick = { /* Navigate forward */ },
indicator = OudsListItemIndicator.Next
)
OudsSmallListItem(
label = "View on web",
onClick = { /* Open browser */ },
indicator = OudsListItemIndicator.External
)
}