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

Artifact: androidx.xr.glimmer:glimmer

View Source

@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` tinted with `contentColor` by default.
`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` and `leadingIcon`.
`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