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 →
Lentes con pantalla
Más información sobre los tipos de dispositivos de realidad extendida →

En Glimmer de Jetpack Compose, el componente TitleChip no es interactivo y proporciona un contexto o un etiquetado breves para el contenido asociado, como un Card o un GlimmerLazyColumn.

Usa chips de título para mostrar información concisa, como un título corto, un nombre de 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 Glimmer de Jetpack Compose. Cada chip de título tiene una etiqueta (1) y un ícono o una 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 BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

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

El siguiente código crea un chip de título con un ícono:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Ejemplo: Crea un chip de título con una tarjeta

Para usar un chip de título con otro componente, coloca el chip de título TitleChipDefaults.associatedContentSpacing sobre el otro componente en el elemento componible. El siguiente código crea un chip de título con una tarjeta:

@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 de forma horizontal, que es la alineación habitual de 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.