TitleChip

Functions summary

Unit
@Composable
TitleChip(
    modifier: Modifier,
    leadingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    content: @Composable RowScope.() -> Unit
)

Title Chip is a component used to provide context for associated content, such as a Card.

Functions

TitleChip

@Composable
fun TitleChip(
    modifier: Modifier = Modifier,
    leadingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = GlimmerTheme.shapes.large,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = TitleChipDefaults.contentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

Title Chip is a component used to provide context for associated content, such as a Card. They are designed for brief information, typically a short title, name, or status. Title chips are not focusable, and not interactable.

import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip

TitleChip { Text("Messages") }

Title chips may have a leading icon to provide more context:

import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip

TitleChip(leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Messages") }

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component. For example, to use a title chip with a card:

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.TitleChip
import androidx.xr.glimmer.TitleChipDefaults

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    TitleChip { Text("Title Chip") }
    Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))
    Card(
        title = { Text("Title") },
        subtitle = { Text("Subtitle") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("Card Content")
    }
}
Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this title chip
leadingIcon: (@Composable () -> Unit)? = null

optional leading icon to be placed before the content. This is typically an Icon.
shape: Shape = GlimmerTheme.shapes.large

the Shape used to clip this title chip, and also used to draw the background and border
color: Color = GlimmerTheme.colors.surface

background color of this title chip
contentColor: Color = calculateContentColor(color)

content color used by components inside content
border: BorderStroke? = SurfaceDefaults.border()

the border to draw around this title chip
contentPadding: PaddingValues = TitleChipDefaults.contentPadding

the spacing values to apply internally between the container and the content
content: @Composable RowScope.() -> Unit

the main content, typically Text, to display inside this title chip