TitleChipKt

Added in 1.0.0-alpha01

public final class TitleChipKt

Summary

Public methods
static final void
@Composable
TitleChip(
    @NonNull Modifier modifier,
    @Composable Function0<Unit> leadingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function1<@NonNull RowScope, Unit> content
)

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

Public methods

TitleChip

@Composable
public static final void TitleChip(
    @NonNull Modifier modifier,
    @Composable Function0<Unit> leadingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function1<@NonNull RowScope, Unit> content
)

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
@NonNull Modifier modifier

the Modifier to be applied to this title chip
@Composable Function0<Unit> leadingIcon

optional leading icon to be placed before the content. This is typically an Icon.
@NonNull Shape shape

the Shape used to clip this title chip, and also used to draw the background and border
@NonNull Color color

background color of this title chip
@NonNull Color contentColor

content color used by components inside content
BorderStroke border

the border to draw around this title chip
@NonNull PaddingValues contentPadding

the spacing values to apply internally between the container and the content
@Composable @NonNull Function1<@NonNull RowScope, Unit> content

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