Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - LeadingIconTab

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

LeadingIconTab di Jetpack Compose

LeadingIconTab adalah sebuah komponen UI di Jetpack Compose yang mirip dengan Tab, tetapi memiliki ikon di bagian depan teks tab. Ikon ini berada di sebelah kiri teks tab dan memungkinkan pengguna untuk mengidentifikasi tab berdasarkan ikon yang ditampilkan.

Kapan Harus Menggunakan LeadingIconTab:

Ketika ingin menambahkan ikon sebagai bagian dari tab untuk membantu pengguna mengidentifikasi tab berdasarkan ikon tersebut.
Memiliki kebutuhan untuk menyesuaikan penampilan tab dengan ikon di depan teks.

Perbedaan dengan Tab dan TabRow:

Tab: Komponen dasar untuk menampilkan tab dengan teks.
TabRow: Wadah untuk menampilkan beberapa tab secara horizontal atau vertical.

Perbedaan LeadingIconTab dengan Tab:

LeadingIconTab memiliki ikon di bagian depan teks tab, sementara Tab hanya menampilkan teks.
LeadingIconTab memungkinkan tambahan ikon untuk memperkaya pengalaman pengguna dalam mengidentifikasi tab.

Parameter/Atribut

@Composable
fun LeadingIconTab(
    selected: Boolean,
    onClick: () -> Unit,
    text: @Composable () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

Parameter LeadingIconTab

selected: Boolean
- Status tab terpilih atau tidak.
onClick: () -> Unit
- Aksi yang akan dijalankan ketika tab diklik.
text: @Composable () -> Unit
- Konten teks yang akan ditampilkan di dalam tab.
icon: @Composable () -> Unit
- Konten ikon yang akan ditampilkan di dalam tab.
modifier: Modifier
- Modifier yang digunakan untuk menyesuaikan tata letak atau gaya tab.
enabled: Boolean
- Menandakan apakah tab dapat diklik atau tidak.
selectedContentColor: Color
- Warna konten saat tab dipilih.
unselectedContentColor: Color
- Warna konten saat tab tidak dipilih.
interactionSource: MutableInteractionSource
- Sumber interaksi yang mengontrol interaksi pengguna terhadap tab.

Contoh

@Composable
fun DemoLeadingIconTab(modifier: Modifier = Modifier) {
    TabRow(selectedTabIndex = 1) {
        LeadingIconTab(
            selected = true,
            onClick = { /*TODO*/ },
            text = {
                 Text("Tab 1")             },
            icon = {
                Icon(Icons.Default.Star, contentDescription = null)
            })
        LeadingIconTab(
            selected = true,
            onClick = { /*TODO*/ },
            text = {
                Text("Tab 2")             },
            icon = {
                Icon(Icons.Default.AddCircle, contentDescription = null)
            })
        LeadingIconTab(
            selected = true,
            onClick = { /*TODO*/ },
            text = {
                Text("Tab 3")             },
            icon = {
                Icon(Icons.Default.Favorite, contentDescription = null)
            })
    }
}