Chips de título en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Display Glasses
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, el componente TitleChip es un componente no interactivo que proporciona un breve contexto o etiquetado para el contenido asociado, como un Card o un VerticalList.

Usa chips de título para brindar información concisa, como un título corto, el nombre de una categoría o un indicador de estado. Normalmente, debes colocar los chips de título sobre el contenido que describen para establecer una relación estructural clara.

Figura 1: Ejemplo de un chip de título con estilo predeterminado y un chip de título fijo en Jetpack Compose Glimmer. Cada chip de título tiene una etiqueta (1) y un ícono o entidad inicial opcional (2).

Ejemplo básico: Crea un chip de título corto

El siguiente código crea un chip de título básico:

@Composable
fun TitleChipSample() {
    TitleChip { Text("Messages") }
}

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@Composable
fun TitleChipWithCardSample() {
    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")
        }
    }
}

Puntos clave sobre el código

  • El chip de título está centrado horizontalmente, que es la alineación habitual para un chip de título colocado sobre una tarjeta.
  • El Spacer tiene una altura fija para proporcionar la cantidad correcta de espaciado vertical entre los dos componentes. Esto se define con TitleChipDefaults.associatedContentSpacing.
  • Usa un leadingIcon opcional para agregar contexto visual adicional antes del contenido de texto.
  • El chip de título usa automáticamente el estilo caption para su texto.
  • El chip de título no es interactivo. Si necesitas una etiqueta en la que se pueda hacer clic, usa un Button o algún otro componente interactivo.