Jetpack Compose - Tab

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

Tab di Jetpack Compose

Tab adalah sebuah komponen UI di Jetpack Compose yang digunakan untuk menampilkan konten yang terkait dengan tab yang dipilih. Pengguna dapat beralih antara tab untuk melihat konten yang berbeda. Setiap tab biasanya memiliki teks atau ikon yang menunjukkan jenis konten yang akan ditampilkan.

Kapan Harus Menggunakan Tab:

• Organisasi Konten: Ketika Anda memiliki beberapa kategori konten yang terkait secara logis dan ingin menampilkan konten ini secara terpisah.
• Navigasi Antara Kategori: Untuk memungkinkan pengguna beralih dengan mudah antara kategori atau jenis konten yang berbeda.

Perbedaan dengan TabRow:

• Tab vs TabRow:
  • Tab adalah komponen individual yang menunjukkan satu kategori konten. Biasanya digunakan bersama dengan TabRow.
  • TabRow adalah wadah untuk menampung tab-tab. Ini digunakan untuk mengatur dan menampilkan beberapa tab secara horizontal atau vertical. TabRow dapat berisi banyak tab dan biasanya digunakan bersama dengan komponen seperti TabBar atau ScrollableTabRow untuk menampilkan tab lebih dari yang dapat ditampilkan dalam layar.

Parameter/Atribut

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

Parameter Tab

• selected: Boolean

  • Menunjukkan apakah tab saat ini dipilih atau tidak.

• onClick: () -> Unit

  • Fungsi lambda yang akan dipanggil ketika tab diklik.

• modifier: Modifier = Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya tab.

• enabled: Boolean = true

  • Menunjukkan apakah tab dapat diklik atau tidak.

• selectedContentColor: Color = LocalContentColor.current

  • Warna konten tab ketika dipilih.

• unselectedContentColor: Color = selectedContentColor

  • Warna konten tab ketika tidak dipilih. Secara default, menggunakan warna konten yang sama dengan saat dipilih.

• interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

  • Sumber interaksi yang menyimpan status interaksi seperti focus dan hover. Biasanya digunakan untuk mengelola interaksi seperti saat tab dihover atau difokuskan.

• content: @Composable ColumnScope.() -> Unit

  • Fungsi @Composable yang menentukan konten dari tab. Biasanya berisi teks atau ikon yang akan ditampilkan di dalam tab.

Contoh

@Composable
fun DemoTabRow(modifier: Modifier = Modifier) {
    TabRow(
        selectedTabIndex = 0,
        tabs = {
            Tab(
                selected = true,
                content = { Text("Tab 1") },
                onClick = { /* Handle tab 1 click */ }
            )
            Tab(
                selected = false,
                content = { Text("Tab 2") },
                onClick = { /* Handle tab 2 click */ }
            )
            Tab(
                selected = false,
                content = { Text("Tab 3") },
                onClick = { /* Handle tab 3 click */ }
            )
        }
    )
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video