{"elements":[{"id":7014,"title":"Componenti UI","body":"
\n
\n

Architettura dei Componenti<\/h2>\n

DressAPI include una libreria di componenti UI riutilizzabili che si integrano nativamente con il template engine. I componenti permettono di inserire elementi complessi — carousel, accordion, tab, card, tabelle dati — con una sintassi dichiarativa semplice, mantenendo la coerenza visiva con il framework CSS scelto.<\/p>\n\n\n

Modalità di Visualizzazione (View Modes)<\/h3>\n

I componenti DressAPI sono organizzati per modalità di visualizzazione (framework). Ogni modalità fornisce le proprie implementazioni dei componenti ottimizzate per un framework CSS specifico.<\/p>\n\n

\n \n \n \n
Modalità<\/th>Framework<\/th>Percorso<\/th>Note<\/th>\n <\/tr><\/thead>\n
bi5<\/strong><\/td>Bootstrap Italia 5<\/td>cms\/plugins\/base\/views\/bi5\/components\/<\/code><\/td>Implementazione di riferimento, conforme alle linee guida di design italiane<\/td><\/tr>\n
b5<\/strong><\/td>Bootstrap 5<\/td>cms\/plugins\/base\/views\/b5\/components\/<\/code><\/td>Applicazioni generiche con Bootstrap 5 standard<\/td><\/tr>\n
default<\/strong><\/td>Nessuno (agnostico)<\/td>core\/src\/modules\/base\/views\/default\/components\/<\/code><\/td>Versione minimale senza dipendenze da framework CSS<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n\n

Flusso di Rendering<\/h3>\n
    \n
  1. Database\/JSON<\/strong> → I dati del componente sono salvati come JSON<\/li>\n
  2. CComponent::Get()<\/strong> → Risolve il template HTML del componente<\/li>\n
  3. CHtmlRender::Render()<\/strong> → Elabora i placeholder e i tag template<\/li>\n
  4. CComponent::PostProcessHtml()<\/strong> → Processing custom (es. <dropdown-item><\/code>)<\/li>\n
  5. Output HTML<\/strong> → HTML finale renderizzato<\/li>\n <\/ol>\n <\/div>\n<\/section>\n\n
    \n
    \n

    Sintassi di Utilizzo dei Componenti<\/h2>\n

    I componenti si utilizzano con il tag <component><\/code> specificando il tipo e i parametri JSON:<\/p>\n

    Sintassi base<\/div>
    <component type=\"button\" id=\"btn1\">\n{{\"label\":\"Clicca qui\",\"type\":\"primary\",\"link\":\"\/azione\"}}\n<\/component><\/code><\/pre><\/div>\n\n    
    Componente con array (multipli)<\/div>
    <component type=\"card\" id=\"cards1\">\n[\n  {{\"title\":\"Card 1\",\"body\":\"Contenuto 1\"}},\n  {{\"title\":\"Card 2\",\"body\":\"Contenuto 2\"}}\n]\n<\/component><\/code><\/pre><\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Catalogo Componenti<\/h2>\n    
    Tutti i componenti sono disponibili nei tre view mode (bi5, b5, default):<\/p>\n    
    \n      \n        \n          \n          
    Componente<\/th>Descrizione<\/th>bi5<\/th>b5<\/th>default<\/th>\n        <\/tr><\/thead>\n        
    accordion<\/strong><\/td>Pannelli espandibili a fisarmonica<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    affix<\/strong><\/td>Elemento fissato durante lo scroll<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    alert<\/strong><\/td>Messaggio di notifica<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    avatar<\/strong><\/td>Immagine profilo utente<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    badge<\/strong><\/td>Etichetta\/contatore<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    breadcrumb<\/strong><\/td>Percorso di navigazione<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    button<\/strong><\/td>Pulsante o link stilizzato<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    callout<\/strong><\/td>Box evidenziato per note importanti<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    card<\/strong><\/td>Scheda contenuto<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    carousel<\/strong><\/td>Slideshow di immagini<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    collapse<\/strong><\/td>Contenitore espandibile\/collassabile<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    contact-info<\/strong><\/td>Informazioni di contatto<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    dropdown<\/strong><\/td>Menu a tendina<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    event-teaser<\/strong><\/td>Anteprima evento<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    hero<\/strong><\/td>Sezione hero con immagine<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    list-group<\/strong><\/td>Lista di elementi raggruppati<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    modal<\/strong><\/td>Finestra modale<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    news-teaser<\/strong><\/td>Anteprima notizia<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    person-card<\/strong><\/td>Scheda persona<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    service-card<\/strong><\/td>Scheda servizio<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    stats-counter<\/strong><\/td>Contatore statistiche animato<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n          
    video<\/strong><\/td>Player video responsivo<\/td>✓<\/td>✓<\/td>✓<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Componenti Predefiniti - Parametri<\/h2>\n\n    
    Button<\/h3>\n    
    Pulsante o link stilizzato.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    label<\/code><\/td>string<\/td>Testo del pulsante<\/td>-<\/td>No<\/td><\/tr>\n          
    type<\/code><\/td>string<\/td>Tipo visuale (primary, secondary, success, danger, warning, info, light, dark)<\/td>'primary'<\/td>Sì<\/td><\/tr>\n          
    link<\/code><\/td>string<\/td>URL destinazione<\/td>'#'<\/td>Sì<\/td><\/tr>\n          
    icon<\/code><\/td>string<\/td>Nome icona (bi5: \"it-pencil\", b5: \"bi bi-pencil\")<\/td>-<\/td>Sì<\/td><\/tr>\n          
    size<\/code><\/td>string<\/td>Dimensione (sm, lg)<\/td>-<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Dropdown<\/h3>\n    
    Menu a tendina con lista di azioni.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    text<\/code><\/td>string<\/td>Testo del pulsante dropdown<\/td>'Menu'<\/td>Sì<\/td><\/tr>\n          
    type<\/code><\/td>string<\/td>Tipo visuale<\/td>'primary'<\/td>Sì<\/td><\/tr>\n          
    items<\/code><\/td>array<\/td>Voci del menu (label, link, onclick, divider, header, disabled, active, icon, badge, danger)<\/td>-<\/td>No<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Collapse<\/h3>\n    
    Contenitore espandibile\/collassabile.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    label<\/code><\/td>string<\/td>Testo del pulsante toggle<\/td>'Toggle'<\/td>Sì<\/td><\/tr>\n          
    content<\/code><\/td>string<\/td>Contenuto del pannello espandibile<\/td>-<\/td>No<\/td><\/tr>\n          
    expanded<\/code><\/td>bool<\/td>Se aperto di default<\/td>false<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Modal<\/h3>\n    
    Finestra modale (dialog).<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    title<\/code><\/td>string<\/td>Titolo della modale<\/td>-<\/td>No<\/td><\/tr>\n          
    body<\/code><\/td>string<\/td>Contenuto HTML<\/td>-<\/td>No<\/td><\/tr>\n          
    footer<\/code><\/td>string<\/td>Contenuto footer<\/td>-<\/td>Sì<\/td><\/tr>\n          
    size<\/code><\/td>string<\/td>Dimensione (sm, lg, xl)<\/td>-<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Card<\/h3>\n    
    Scheda contenuto.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    title<\/code><\/td>string<\/td>Titolo card<\/td>-<\/td>Sì<\/td><\/tr>\n          
    body<\/code><\/td>string<\/td>Contenuto principale<\/td>-<\/td>No<\/td><\/tr>\n          
    image<\/code><\/td>string<\/td>URL immagine header<\/td>-<\/td>Sì<\/td><\/tr>\n          
    footer<\/code><\/td>string<\/td>Contenuto footer<\/td>-<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Alert<\/h3>\n    
    Messaggio di notifica.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    message<\/code><\/td>string<\/td>Testo del messaggio<\/td>-<\/td>No<\/td><\/tr>\n          
    type<\/code><\/td>string<\/td>Tipo (success, warning, danger, info)<\/td>'info'<\/td>Sì<\/td><\/tr>\n          
    dismissible<\/code><\/td>bool<\/td>Mostra pulsante chiusura<\/td>false<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Carousel<\/h3>\n    
    Slideshow di immagini.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    image<\/code><\/td>string<\/td>URL dell'immagine<\/td>-<\/td>No<\/td><\/tr>\n          
    title<\/code><\/td>string<\/td>Titolo slide<\/td>-<\/td>Sì<\/td><\/tr>\n          
    caption<\/code><\/td>string<\/td>Descrizione slide<\/td>-<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Accordion<\/h3>\n    
    Pannelli espandibili a fisarmonica.<\/p>\n    
    \n      \n        \n          
    Parametro<\/th>Tipo<\/th>Descrizione<\/th>Default<\/th>Opzionale<\/th><\/tr><\/thead>\n        
    title<\/code><\/td>string<\/td>Titolo del pannello<\/td>-<\/td>No<\/td><\/tr>\n          
    body<\/code><\/td>string<\/td>Contenuto del pannello<\/td>-<\/td>No<\/td><\/tr>\n          
    expanded<\/code><\/td>bool<\/td>Se aperto di default<\/td>false<\/td>Sì<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Direttive Template<\/h2>\n    
    I template dei componenti utilizzano direttive speciali per gestire la cardinalità dei dati:<\/p>\n\n    
    \n      \n        \n          
    Direttiva<\/th>Descrizione<\/th>Uso<\/th><\/tr><\/thead>\n        
    [single]...[\/single]<\/code><\/td>Template per un singolo elemento<\/td>Quando il JSON contiene un solo oggetto<\/td><\/tr>\n          
    [multiple]...[\/multiple]<\/code><\/td>Template per elementi multipli<\/td>Quando il JSON contiene un array con 2+ elementi<\/td><\/tr>\n          
    [empty]...[\/empty]<\/code><\/td>Template per nessun elemento<\/td>Quando il JSON è un array vuoto<\/td><\/tr>\n          
    [repeat]...[\/repeat]<\/code><\/td>Blocco ripetuto per ogni elemento<\/td>Dentro [multiple] per iterare sugli elementi<\/td><\/tr>\n          
    [if-exists(var)]...[\/if-exists]<\/code><\/td>Mostra solo se la variabile esiste<\/td>Per contenuti opzionali<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n\n    
    Esempio di template componente<\/div>
    <!-- Template per singolo elemento -->\n[single]\n<div class=\"my-component\">\n    <h3>{{title}}<\/h3>\n    [if-exists(text)]\n        <p>{{text}}<\/p>\n    [\/if-exists]\n<\/div>\n[\/single]\n\n<!-- Template per elementi multipli -->\n[multiple]\n[repeat]\n<div class=\"my-component\">\n    <h3>{{title}}<\/h3>\n<\/div>\n[\/repeat]\n[\/multiple]<\/code><\/pre><\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Variabili di Loop<\/h2>\n    
    All'interno dei blocchi [repeat]<\/code>, sono disponibili variabili speciali per il ciclo:<\/p>\n    
    \n      \n        \n          
    Variabile<\/th>Tipo<\/th>Descrizione<\/th><\/tr><\/thead>\n        
    {{loop::index}}<\/code><\/td>int<\/td>Indice corrente (parte da 0)<\/td><\/tr>\n          
    {{loop::index1}}<\/code><\/td>int<\/td>Indice corrente (parte da 1)<\/td><\/tr>\n          
    {{loop::first}}<\/code><\/td>bool<\/td>true se è il primo elemento<\/td><\/tr>\n          
    {{loop::last}}<\/code><\/td>bool<\/td>true se è l'ultimo elemento<\/td><\/tr>\n          
    {{loop::total}}<\/code><\/td>int<\/td>Numero totale di elementi<\/td><\/tr>\n          
    {{loop::odd}}<\/code><\/td>bool<\/td>true se l'indice è dispari<\/td><\/tr>\n          
    {{loop::even}}<\/code><\/td>bool<\/td>true se l'indice è pari<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n    
    Esempio con variabili di loop<\/div>
    [repeat]\n<li class=\"list-item{{ loop::first ? ' first' : '' }}{{ loop::last ? ' last' : '' }}\">\n    {{loop::index1}}. {{label}}\n<\/li>\n[\/repeat]<\/code><\/pre><\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Creare Componenti Custom<\/h2>\n\n    
    1. Struttura Directory<\/h3>\n    
    Struttura file<\/div>
    cms\/plugins\/base\/views\/bi5\/components\/mycomponent\/\n└── mycomponent.html    (obbligatorio - template HTML)\n└── mycomponent.css     (opzionale - stili CSS)\n┌── mycomponent.js      (opzionale - JavaScript)<\/code><\/pre><\/div>\n\n    
    2. Template HTML<\/h3>\n    
    mycomponent.html<\/div>
    <!--\nMYCOMPONENT Component\n\n@example {{\"title\":\"Hello\",\"text\":\"World\"}}\n\n@param string title - Component title\n@param string text - Component text (optional)\n-->\n[single]\n<div class=\"my-component\">\n    <h3>{{title}}<\/h3>\n    [if-exists(text)]\n        <p>{{text}}<\/p>\n    [\/if-exists]\n<\/div>\n[\/single]<\/code><\/pre><\/div>\n\n    
    3. CSS e JavaScript<\/h3>\n    
    I file CSS e JS vengono caricati automaticamente da CComponent<\/code> se presenti nella directory del componente. Non è necessario includerli manualmente.<\/p>\n\n    
    mycomponent.css<\/div>
    .my-component {\n    border: 1px solid #ddd;\n    padding: 1rem;\n}<\/code><\/pre><\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Operatore Ternario nei Componenti<\/h2>\n    
    L'operatore ternario è ideale per gestire classi e attributi condizionali:<\/p>\n\n    
    Sintassi ternaria<\/div>
    <!-- Classe condizionale per stato attivo -->\n<button class=\"btn btn-primary{{ active ? ' active' : '' }}\">\n\n<!-- Attributi condizionali -->\n<button{{disabled ? ' disabled' : ''}}>\n\n<!-- Aria attributes per accessibilità -->\n<div aria-expanded=\"{{ expanded ? 'true' : 'false' }}\"><\/code><\/pre><\/div>\n\n    
    \n      \n        \n          
    Caso d'uso<\/th>Sintassi consigliata<\/th><\/tr><\/thead>\n        
    Aggiungere classe CSS se booleano è true<\/td>{{ active ? ' active' : '' }}<\/code><\/td><\/tr>\n          
    Mostrare\/nascondere elemento HTML<\/td>[if-exists(icon)]...[\/if-exists]<\/code><\/td><\/tr>\n          
    Scegliere tra due valori<\/td>{{ theme == 'dark' ? 'white' : 'black' }}<\/code><\/td><\/tr>\n          
    Verificare esistenza variabile<\/td>[if-exists(variable)]<\/code><\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n  <\/div>\n<\/section>\n\n
    \n  
    \n    
    Best Practices<\/h2>\n\n    
    Convenzioni di Naming<\/h3>\n