Tombol ikon di Jetpack Compose Glimmer

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, IconButton adalah komponen interaktif ringkas yang digunakan untuk menampilkan tindakan tambahan dengan satu ketukan.

Tombol ikon terlihat lebih kecil daripada tombol standar, tetapi mempertahankan batas fisik untuk memastikan kemudahan interaksi pada display glasses.

Untuk kasus penggunaan lainnya, ada juga tombol standar dan tombol alih.

Contoh beberapa gaya tombol ikon yang berbeda di Jetpack Compose Glimmer. Contoh ini menunjukkan lima status tombol ikon: Diaktifkan (1), Difokuskan (2), Ditekan (3), Dinonaktifkan (4), Dinonaktifkan dan difokuskan (5).

Ukuran dan dimensi

Elemen Dimensi

Ukuran penampung minimum

48 x 48 dp

Ukuran ikon internal

32 x 32 dp

Padding konten default

GlimmerTheme.componentSpacingValues.small

Negara bagian

Tombol ikon di Jetpack Compose Glimmer mengubah tampilannya untuk mengomunikasikan statusnya.

  • Diaktifkan: Status interaktif default.
  • Difokuskan: Menerapkan GlimmerTheme.depthEffectLevels.level1 dan sorotan batas yang difokuskan.
  • Ditekan: Menerapkan overlay putih semi-transparan ke permukaan.
  • Dinonaktifkan: Tombol tidak interaktif dan masukan visual dihapus.

Default tombol ikon

Default berikut berlaku untuk tombol ikon:

  • Bentuk: Default ke GlimmerTheme.shapes.large (biasanya melingkar).
  • Warna: Default ke GlimmerTheme.colors.surface.
  • Warna konten: Dihitung secara otomatis dari warna latar belakang, kecuali jika disediakan secara eksplisit.
  • Padding konten: Menyediakan spasi default antara ikon dan tepi penampung.
  • Ukuran minimum: Nilai tetap 48.dp untuk mencegah tombol menjadi terlalu kecil untuk berinteraksi.
  • Ukuran ikon: Default ke GlimmerTheme.iconSizes.small (32.dp).

Contoh: Tombol ikon

Kode berikut membuat tombol ikon dengan karakteristik default:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}