Adattamento e Disposizione Intelligente delle Colonne
Due funzionalità responsive indipendenti, attive per impostazione predefinita, che mantengono utilizzabile una tabella larga senza alcuno scorrimento orizzontale sugli schermi più piccoli.
Panoramica
Entrambe le funzionalità sono attive per impostazione predefinita su tutto il sito (XcrudConfig::$intelligentColumnFit e XcrudConfig::$intelligentColumnArrangement, entrambe true), e possono essere sovrascritte per singola pagina:
$xcrud->intelligent_column_fit();
$xcrud->intelligent_column_arrangement();
// Oppure disattiva una delle due solo per questa pagina:
$xcrud->intelligent_column_fit(false);
| Metodo | Tipo | Predefinito | Descrizione |
|---|---|---|---|
intelligent_column_fit($enabled = true) | bool | XcrudConfig::$intelligentColumnFit | Override per singola pagina del Column Fit |
intelligent_column_arrangement($enabled = true) | bool | XcrudConfig::$intelligentColumnArrangement | Override per singola pagina del Column Arrangement |
Risolvono problemi di larghezza diversi e non entrano in conflitto - vedi "Come interagiscono le due funzionalità" più sotto.
Column Fit
Column Fit misura dal vivo, nel browser, quali colonne della griglia entrano effettivamente nella larghezza attuale del contenitore e mostra solo quelle - le restanti vengono nascoste dietro un piccolo pulsante di espansione per riga, che le rivela come riga di dettaglio senza bordi in formato "etichetta: valore" solo per quella riga, al click. Viene ricalcolato automaticamente al ridimensionamento della finestra, quindi una griglia che si adatta perfettamente su un monitor largo e mostra solo 4 delle 8 colonne su un laptop ne mostrerà di più o di meno man mano che la finestra viene allargata o ristretta.
$xcrud->table('customers');
$xcrud->intelligent_column_fit();
Si tratta di una funzionalità puramente additiva e lato client - non cambia nulla per una tabella le cui colonne entrano già, o per una pagina che non la attiva mai.
Column Arrangement
Column Arrangement è pensato specificamente per i viewport stretti, larghezza da smartphone (circa ≤640px), dove una tabella non ha più alcuna lettura "in orizzontale" sensata. Invece di ridurre o nascondere le colonne, ridisegna completamente ogni riga: ogni riga della griglia diventa una propria card bordata e impilata, con una riga "Etichetta: valore" per ciascun campo. Se la riga contiene un'immagine, una foto o un campo di tipo fotocamera, quel campo viene fissato come miniatura ancorata al bordo della card invece di apparire come un'ulteriore riga etichetta:valore.
$xcrud->table('products');
$xcrud->intelligent_column_arrangement();
Come interagiscono le due funzionalità
Column Fit e Column Arrangement sono consapevoli l'una dell'altra, non in competizione: al breakpoint stretto (≤640px), Arrangement subentra automaticamente a Fit - la griglia diventa una pila di card invece di una riga di colonne misurate per adattamento. Sopra quella larghezza, Arrangement non fa nulla e Fit (se anch'esso attivo) continua a gestire l'overflow nel modo consueto. In pratica puoi lasciarle entrambe attive ovunque e ciascuna interverrà esattamente dove è la soluzione più adatta.