Grid — layout kolom

Komponen Grid dari NexaJS menata anak-anak (children) ke dalam baris dengan jumlah kolom tetap. Cocok untuk menu ikon, kartu ringkas, statistik ringkas, dan daftar item yang perlu rapi secara horizontal tanpa menulis flex manual untuk setiap baris.

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar Grid diekspor sebagai default dan didaftarkan pada array MenuComponents dengan nama route "Grid" (judul header: "Grid").
Navigasi — Dari layar lain, panggil navigation.navigate("Grid") dengan nama string yang sama persis dengan name di entri menu. Gambaran umum route ada di Konfigurasi dan flow route dan menu.js & MenuComponents.
Render — Layar demo membungkus seluruh konten dalam <ScrollView> agar beberapa blok <Grid> bertumpuk vertikal tetap dapat di-scroll. Setiap blok berisi judul section (Text) lalu satu <Grid> dengan kartu-kartu (View) di dalamnya.

Import dan kerangka layar

Primitif yang dipakai diimpor dari NexaJS: antara lain View, StyleSheet, Text, ScrollView, Dimensions, dan Grid. Pada implementasi referensi, TouchableOpacity ikut diimpor tetapi belum dipakai di JSX — bisa dihapus atau dipakai nanti untuk item yang bisa ditekan.

Import & kerangka layar

import {
  View, StyleSheet, Text, ScrollView, Grid,
} from "NexaJS";

export default function Screen() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.sectionTitle}>Judul section</Text>
      <Grid columns={2} spacing={0.5}>
        <View style={styles.gridCard}>...</View>
        <View style={styles.gridCard}>...</View>
      </Grid>
    </ScrollView>
  );
}

Properti `Grid`

Ringkasan berikut selaras dengan komentar penggunaan di modul referensi dan perilaku umum komponen layout. Verifikasi pada versi NexaJS proyek Anda bila ada perbedaan.

Properti	Peran
`columns`	Jumlah kolom per baris (bilangan). Pada demo dipakai `2`, `3`, dan `4`.
`spacing`	Jarak antar sel/item dalam grid (bilangan). Demo memakai `0.5` secara konsisten antar section.
`style`	Gaya tambahan pada wadah grid (objek style React Native), opsional.
Children	Elemen langsung di dalam `<Grid>` dianggap sebagai sel; urutan mengisi baris kiri-ke-kanan, lalu baris berikutnya.

Empat blok `Grid` pada layar demo

Dua kolom — menu / ringkasan — Dua kartu berdampingan (“Recent Activity”, “Notifications”). Pola ini cocok untuk pintasan atau dua ringkasan setara.
Tiga kolom — statistik — Tiga angka besar dengan label (“Orders”, “Sales”, “Users”). columns={3} membuat deretan metrik sejajar.
Empat kolom — info ringkas — Empat sel kecil (“New”, “Pending”, “Active”, “Closed”) untuk status atau KPI padat.
Dua kolom — kartu konten — Struktur sama seperti poin pertama (dua kartu); mengulang pola menunjukkan bahwa satu layar bisa memakai beberapa Grid independen dengan judul section berbeda.

Gaya section dan kartu

styles.container pada ScrollView: flex: 1, latar putih. sectionTitle memisahkan blok secara visual (ukuran font 13, semi-bold, margin vertikal kecil, padding horizontal tipis).

gridCard memberi padding isi, border tipis abu-abu, latar putih — setiap sel terbaca sebagai kartu. cardTitle dan cardContent membedakan judul dan teks sekunder. Variasi statNumber dan infoNumber menyesuaikan ukuran/warna angka di grid statistik vs info ringkas.

Lebar layar (`Dimensions`)

Modul referensi memanggil Dimensions.get("window").width ke variabel tingkat modul. Pada versi yang sama dengan dokumentasi ini, nilai tersebut belum dipakai di JSX — biasanya disiapkan untuk layout responsif (lebar kolom proporsional, breakpoint, atau padding horizontal mengikuti lebar layar). Anda bisa mengaitkannya ke style kartu atau ke prop turunan Grid jika API mendukungnya.

Praktik yang disarankan

Bungkus konten panjang dengan ScrollView (atau FlatList jika data dinamis besar) agar grid banyak baris tidak memotong layar.
Samakan spacing dalam satu layar bila memungkinkan agar ritme visual konsisten.
Untuk item yang bisa diketuk, bungkus isi sel dengan TouchableOpacity (atau komponen tekan NexaJS) dan arahkan ke navigasi atau aksi — impor yang sudah ada di referensi siap dipakai.
Pada layar sempit, pertimbangkan mengurangi columns (mis. 4 → 2) berdasarkan lebar; di sinilah Dimensions atau hook lebar layar berguna.

Nxdom Framework