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 TitleChip componente es un componente no interactivo que proporciona un contexto breve o un etiquetado para el contenido asociado, como una Card o una VerticalList.

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

Figura 1. Un ejemplo de un chip de título de 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

Con el siguiente código, se 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

Con el siguiente código, se 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. Con el siguiente código, se 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 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 espacio 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 caption estilo 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.