NexaGrid NX.grid

Grid 12 kolom, CSS grid.css, API programatik. Integrasi route: parameter style di route.register

Instalasi & setup

NexaGrid terdaftar di nxdom.js dan tersedia sebagai NX.grid (alias NX.NexaGrid / NX.Grid). CSS dimuat otomatis saat instance dibuat.

Import (ES6 modules)

Gunakan objek NX yang sudah di-bundle; instance siap pakai: NX.grid.

Akses global

const grid = new NX.Grid(); // atau langsung: const container = NX.grid.createContainer({ nx: true, parent: document.body });

Akses melalui NX

1. Instance siap pakai (NX.grid)

const container = NX.grid.createContainer({ nx: true, parent: document.body }); const row = NX.grid.createRow({ nx: true, parent: container }); const col = NX.grid.createCol({ cols: 6, content: "Content" });

2. Class untuk instance baru

const grid = new NX.NexaGrid(); const grid2 = new NX.Grid();

3. Method helper di NexaRoute

Di handler route: route.applyGridStyle(container, style), route.createGridLayout(container, rows, options).

Penggunaan di Route

Format dasar

route.register(page, handler, styleObject) — argumen ketiga berisi useContainer, container: { nx: true }, rows: [...]. Di callback, panggil await route.applyGridStyle(container, style) jika ada style.

Contoh lengkap

Lihat NexaGrid.md § Contoh route about.js dan contoh 4 di bawah.

route.applyGridStyle(container, style)

Menerapkan objek style (container + rows + columns) ke DOM.

route.createGridLayout(container, rows, options)

Membangun layout dari array baris tanpa objek style penuh.

API reference

Constructor

new NexaGrid() / new NX.Grid() — memuat grid.css saat pertama kali.

createContainer(options)

nx, parent, padding/margin (shorthand atau per sisi), angka → px.

createRow(options)

nx, spacing / spacingSm…spacingXl, justify, align, parent, padding & margin.

createCol(options)

cols 1–12, responsive, offset, offsetResponsive, textAlign, content, parent, spacing.

createRowWithCols(options)

Mengembalikan { row, columns } dari array columns.

createGrid(config)

Async — selalu await. parent, useContainer, container, rows.

applySpacing(element, spacing)

Terapkan padding/margin ke elemen arbitrer.

addUtilities(element, utilities)

Teks, float, flex, margin auto, sticky, visibility mobile, dll.

getCurrentBreakpoint()

Mengembalikan xs | sm | md | lg | xl.

isBreakpoint(breakpoint)

True jika viewport memenuhi breakpoint.

responsiveCol(sizes)

Objek konfigurasi kolom responsif untuk di-spread ke createCol.

Contoh penggunaan

Contoh 1: layout sederhana

Container + createRowWithCols satu baris — lihat NexaGrid.md.

Contoh 2: multiple rows

Beberapa baris dengan kolom berbeda.

Contoh 3: kolom responsif

Gunakan responsive: { sm, md, lg, xl } pada createCol.

Contoh 4: route + parameter style

Sama seperti § Penggunaan di Route di atas.

Contoh 5: konten dinamis dari API

Contoh 6: offset kolom

Contoh 7: utilities

Contoh 8: padding & margin

Contoh 9: layout lengkap + spacing

Contoh 10: nilai numerik → px

Contoh 5–10: detail kode di NexaGrid.md.

Breakpoints

Nama Lebar
xs0px (default)
sm≥ 576px
md≥ 768px
lg≥ 992px
xl≥ 1200px

Menggunakan breakpoints

const current = NX.grid.getCurrentBreakpoint(); if (NX.grid.isBreakpoint("md")) { /* ... */ } const col = NX.grid.createCol({ cols: 12, responsive: { sm: 6, md: 4, lg: 3, xl: 2 }, content: "<p>Responsive</p>" });

Utility classes

Lewat addUtilities(element, { ... }):

Text alignment

textAlign, textAlignForce.

Text style

textItalic, textNormal, textNowrap.

Float

float: 'left' | 'right'.

Flexbox

displayFlex, justifyContent, align.

Margin (utility)

marginLeftAuto, marginRightAuto, flexPullRight, flexPullLeft.

Visibility

hideMobile, showMobile, sticky.

Padding & margin

Berlaku untuk container, row, dan column: shorthand CSS, properti per sisi, atau angka → px.

Format

1. Shorthand

Satu, dua, tiga, atau empat nilai (atas/kanan/bawah/kiri) seperti CSS standar.

2. Individual

paddingTop, marginBottom, dll.

3. Nilai numerik

Angka diubah ke string px.

Contoh penggunaan

Container, row, column, createGrid, dan route style — lihat NexaGrid.md.

Tips

Utamakan shorthand; gunakan angka untuk pixel; jaga konsistensi spacing antar komponen.

Tips & best practices

  1. await NX.grid.createGrid(...) — jangan lupa async/CSS.
  2. Parameter style di route.register untuk layout terstruktur.
  3. Selalu pertimbangkan responsive pada kolom.
  4. Gunakan applyGridStyle / createGridLayout dari route.
  5. Padding & margin shorthand untuk perawatan mudah.

Catatan penting

  • grid.css auto-load pada instance pertama.
  • createGrid async.
  • Default kelas nx-*.
  • Sistem 12 kolom.

Lihat juga