Inizia

Installa Nexigrid

Due file nella pagina e inizi a scrivere classi ng-. Niente build, niente dipendenze.

Aggiungi stili e script

Linka il foglio di stile nell head e gli script core prima della chiusura del body. Aggiungi il JS di ogni componente interattivo che usi.

index.html
<!-- in <head> -->
<link rel="stylesheet" href="/assets/css/nexigrid.css">

<!-- before </body> -->
<script type="module" src="/assets/js/ng_core.js"></script>
<script type="module" src="/assets/js/ng_observer.js"></script>
<script type="module" src="/assets/js/ng_dropdown.js"></script>

Struttura file

Il framework è fatto di file semplici — copia il dist nel progetto, nessun bundler.

project
assets/
  css/
    nexigrid.css
  js/
    ng_core.js
    ng_observer.js
    ng_<component>.js
  fonts/
    inter/   phosphor/

Il tuo primo componente

Scrivi il markup con le classi ng-. I componenti CSS-only funzionano subito; quelli interattivi si montano da soli.

index.html
<button class="ng-btn ng-btn-primary">Get started</button>
<span class="ng-badge ng-badge-success-soft">Ready</span>
Anteprima live
Ready

Dark mode

Cambia tema con un solo attributo data-theme, o via JS.

theme
<!-- default theme -->
<html data-theme="dark"> … </html>

<!-- toggle from JS -->
<button data-theme-toggle>Toggle theme</button>

Codice sorgente

Clona il repository o sfoglia il codice su GitHub.

terminal
git clone https://github.com/DevonMax/nexigrid.git

Prossimi passi

Esplora la reference completa dei componenti.

Vai ai componenti