Typography — utilitas `fs`

Objek fs dari NexaJS menyediakan gaya teks siap tempel: ukuran, berat, perataan, dan dekorasi. Layar demo menyusun beberapa section vertikal di dalam View untuk menunjukkan kombinasi yang umum dipakai tanpa menulis angka piksel atau fontWeight manual di setiap tempat.

Alur penggunaan di aplikasi

Pendaftaran route — Default export modul tipografi terdaftar sebagai "Typography" di MenuComponents (judul header pada referensi: "Typography Examples").
Navigasi — navigation.navigate("Typography"). Lihat Konfigurasi dan flow route dan MenuComponents.
Render — Tidak ada hook pemuatan font; layar langsung merender Text dengan array style [fs.*, styles...]. Cocok dipasangkan dengan font yang sudah dimuat di root app atau dengan halaman Fonts untuk konsistensi Montserrat.

Import

import { fs, View, Text, StyleSheet } from "NexaJS";
// Opsional bersama FontFamily dari NexaJS bila perlu

Pada berkas referensi lama, FontFamily ikut diimpor meski tidak dipakai di JSX — boleh dihapus untuk menghindari peringatan linter.

Cuplikan cepat

Ukuran, berat, perataan

import { fs, View, Text, StyleSheet } from "NexaJS";

const styles = StyleSheet.create({
  section: { marginBottom: 16, gap: 8 },
});

export default function Screen() {
  return (
    <View style={styles.section}>
      <Text style={[fs.lg, fs.semibold]}>Bagian</Text>
      <Text style={[fs.md]}>Teks medium (16px)</Text>
      <Text style={[fs.sm, fs.light]}>Sekunder ringan</Text>
      <Text style={[fs.md, fs.center]}>Rata tengah</Text>
    </View>
  );
}

Gabungan + kunci bracket

<Text style={[fs["2xl"], fs.bold, fs.center]}>
  Judul besar
</Text>
<Text style={[fs.md, fs.italic, fs.underline]}>
  Teks ditekankan
</Text>
<Text style={[fs.sm, fs["line-through"]]}>
  Coret
</Text>

Ukuran (`fs`)

Pada demo muncul: xs (12px), sm (14), md (16), lg (18), xl (20), 2xl (24), 3xl (30), 4xl (36). Untuk kunci angka seperti 2xl, akses dengan bracket: fs["2xl"].

Berat

fs.thin, fs.light, fs.normal, fs.medium, fs.semibold, fs.bold, fs.extrabold, fs.black — digabung dengan fs.md atau ukuran lain untuk baris demo.

Perataan

fs.left, fs.center, fs.right, fs.justify. Contoh justify memakai paragraf beberapa baris agar efek kiri-kanan terlihat.

Dekorasi

fs.italic, fs.underline, fs["line-through"] — akses line-through dengan bracket karena mengandung tanda hubung.

Gabungan

Beberapa selector dapat disatukan dalam satu array, mis. [fs["2xl"], fs.bold, fs.center] untuk judul besar tebal terpusat, atau [fs.sm, fs.italic, fs.light] untuk teks sekunder ringan.

Gaya kontainer

styles.container: flex: 1, padding, latar putih. Section memakai marginBottom dan gap: 8 antar teks di dalam grup.

Praktik yang disarankan

Gunakan fs sebagai “design token” tipografi agar skala konsisten antar layar.
Untuk konten yang bisa sangat panjang, pertimbangkan ScrollView; referensi saat ini memakai View tunggal.
Setelah mengubah skala fs di framework, UI lama ikut berubah — dokumentasikan breaking change di tim.

Nxdom Framework

Typography — utilitas fs