Buttons — aksi tekan

Komponen Buttons dari NexaJS menyatukan label, warna, padding, ikon opsional, status loading, susunan grid, dan navigasi terprogram dalam satu primitif. Layar demo menampilkan beberapa pola umum: tombol dasar, tombol dengan ukuran teks kustom, tombol async dengan loading, pasangan tombol berbaris dengan ikon, serta tombol yang memicu navigasi ke route lain beserta parameter.

Alur penggunaan di aplikasi

Pendaftaran route — Modul layar diekspor sebagai default dan terdaftar di MenuComponents dengan nama "Buttons" (judul: "Buttons").
Navigasi — navigation.navigate("Buttons"). Konfigurasi route · MenuComponents.
Render — View vertikal dengan padding; beberapa instance <Buttons /> dan satu baris horizontal untuk dua tombol grid.

Cuplikan cepat

Tombol dasar

import { View, StyleSheet, Buttons } from "NexaJS";

<Buttons
  label="Simpan"
  background="#007AFF"
  txColor="#FFFFFF"
  vertical={6}
  border={10}
  onPress={() => {}}
/>

Loading + ikon + navigasi

import { View, useState, Buttons } from "NexaJS";

const [loading, setLoading] = useState(false);

<Buttons
  label="Proses"
  loading={loading}
  background="#E91E63"
  txColor="#FFFFFF"
  border={8}
  vertical={6}
  onPress={() => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  }}
/>

<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
  <Buttons label="Home" grid={5} Feather="home" background="#9C27B0" txColor="#FFF" border={8} onPress={() => {}} />
  <Buttons label="Setelan" grid={5} Ion="settings" background="#FF9800" txColor="#FFF" border={8} onPress={() => {}} />
</View>

<Buttons
  label="Ke Profile"
  navigasi={{ name: "Profile", value: { userId: 123 } }}
  background="#2196F3"
  txColor="#FFFFFF"
  border={8}
/>

Import

Pada referensi, useState diimpor dari NexaJS bersama View, StyleSheet, dan Buttons. Jika toolchain Anda mengharuskan useState dari react, sesuaikan impor; perilaku state tetap sama.

Properti yang dipakai di demo

Prop	Peran
`label`	Teks pada tombol.
`background`	Warna latar (string, mis. hex).
`txColor`	Warna teks.
`vertical`	Padding vertikal numerik (contoh: 6).
`border`	Radius sudut / konstanta border sesuai implementasi NexaJS (contoh: 8, 10).
`fontSize`	Ukuran teks opsional (contoh: 16).
`onPress`	Callback ketika ditekan (tidak dipakai bersamaan dengan `navigasi` pada contoh terakhir).
`loading`	Boolean — menampilkan indikator memuat saat `true`.
`grid`	Angka lebar fraksi (demo memakai `5` agar dua tombol sejajar dalam baris).
`Feather` / `Ion`	Nama ikon untuk family Feather atau Ionicons (selaras dengan pola Icon).
`navigasi`	Objek `{ name: "RouteName", value: { ...params } }` — route dan payload harus dikenal navigator Anda (contoh `Profile` dengan `userId`).

Varian pada layar demo

Dasar — Biru iOS, teks putih, onPress log (ganti dengan aksi nyata).
Simpan — Hijau, fontSize 16; pola formulir.
Loading — Merah muda, handlePress mengaktifkan loading 2 detik (simulasi request).
Grid berbaris — Dua tombol grid={5} dengan Feather dan Ion dalam flexDirection: "row".
Navigasi — Tanpa onPress eksplisit di JSX; komponen mengarahkan ke route Profile.

Praktik yang disarankan

Ganti console.log dengan mutasi state, panggilan API, atau navigasi manual jika tidak memakai prop navigasi.
Pastikan route pada navigasi.name terdaftar di navigator; jika tidak ada layar Profile, sesuaikan nama atau parameter.
Untuk loading produksi, set false di finally setelah promise API, bukan hanya setTimeout.
Pertimbangkan token Colors mengganti literal hex agar selaras tema.

Nxdom Framework