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 →
Display Glasses
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, komponen TitleChip adalah komponen non-interaktif yang memberikan konteks atau pelabelan singkat untuk konten terkait, seperti sebuah Card atau sebuah 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 dijelaskannya untuk menetapkan 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 entity utama opsional (2).

Contoh dasar: Membuat chip judul singkat

Kode berikut membuat chip judul dasar:

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

Contoh dasar: Membuat chip judul dengan ikon

Kode berikut membuat chip judul dengan ikon:

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

Contoh: Membuat chip judul dengan kartu

Untuk menggunakan chip judul dengan komponen lain, tempatkan chip judul TitleChipDefaults.associatedContentSpacing di atas komponen lain dalam composable. Kode berikut membuat chip judul dengan kartu:

@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.
  • The Spacer memiliki tinggi tetap untuk memberikan jumlah spasi vertikal yang tepat 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 a Button atau komponen interaktif lainnya.