Chips de título no Glimmer do Jetpack Compose

Dispositivos XR relevantes
Estas orientações ajudam você a criar experiências para esses tipos de dispositivos XR.
Saiba mais sobre esses dispositivos →
Óculos de exibição
Saiba mais sobre esses dispositivos →

No Glimmer do Jetpack Compose, o componente TitleChip é um componente não interativo que fornece um breve contexto ou rotulagem para conteúdo associado, como um Card ou um VerticalList.

Use ícones de título para informações concisas, como um título curto, um nome de categoria ou um indicador de status. Normalmente, você coloca os ícones de título acima do conteúdo que eles descrevem para estabelecer uma relação estrutural clara.

Figura 1. Exemplo de um chip de título de estilo padrão e um chip de título fixo no Glimmer do Jetpack Compose. Cada ícone de título tem um rótulo (1) e um ícone ou entidade inicial opcional (2).

Exemplo básico: criar um ícone de título curto

O código a seguir cria um ícone 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")
        }
    }
}

Pontos principais sobre o código

  • O ícone de título é centralizado horizontalmente, que é o alinhamento usual para um ícone de título colocado acima de um card.
  • O Spacer tem uma altura fixa para fornecer a quantidade certa de espaçamento vertical entre os dois componentes. Isso é definido usando TitleChipDefaults.associatedContentSpacing.
  • Usa um leadingIcon opcional para adicionar mais contexto visual antes do conteúdo de texto.
  • O ícone de título usa automaticamente o estilo caption no texto.
  • O ícone de título não é interativo. Se você precisar de um rótulo clicável, use um Button ou outro componente interativo.