Chip judul di Glimmer Jetpack Compose

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen TitleChip adalah komponen non-interaktif yang memberikan konteks atau pelabelan singkat untuk konten terkait, seperti Card atau VerticalList.

Gunakan chip judul untuk informasi ringkas seperti judul singkat, nama kategori, atau indikator status. Biasanya, Anda harus menempatkan chip judul di atas konten yang dideskripsikannya untuk membangun hubungan struktural yang jelas.

Gambar 1. Contoh chip judul gaya default dan chip judul tetap di Jetpack Compose Glimmer. Setiap chip judul memiliki label (1) dan ikon atau entitas di awal yang bersifat opsional (2).

Contoh dasar: Membuat chip judul singkat

Kode berikut membuat chip judul dasar:

@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")
        }
    }
}

Poin penting tentang kode

  • Chip judul dipusatkan secara horizontal, yang merupakan perataan biasa untuk chip judul yang ditempatkan di atas kartu.
  • Spacer memiliki tinggi tetap untuk memberikan jumlah spasi vertikal yang tepat di antara kedua komponen. Hal ini ditentukan menggunakan TitleChipDefaults.associatedContentSpacing.
  • Menggunakan leadingIcon opsional untuk menambahkan konteks visual tambahan sebelum konten teks.
  • Chip judul otomatis menggunakan gaya caption untuk teksnya.
  • Chip judul tidak interaktif. Jika Anda memerlukan label yang dapat diklik, gunakan Button atau komponen interaktif lainnya.