Questo snippet integra il Compatibility Widget in una pagina web.
Viene utilizzato per visualizzare informazioni di compatibilità dei prodotti in formato tabellare, con aspetto personalizzabile e impaginazione.
Scopo
Il tag <compatibility-widget> mostra una tabella paginata e stilizzata dei prodotti compatibili. È progettato per essere incorporato in pagine prodotto o di supporto per aiutare gli utenti a identificare dispositivi o accessori compatibili.
Code Snippet
<compatibility-widget items-per-page="12" />
<script type="module" src="https://myflasher.com/widget.min.js"></script>
<style>
compatibility-widget {
--mf-font: "Rajdhani", sans-serif;
--mf-border-color: #F1F1F1;
--mf-border-radius: 10px;
--mf-header-bg: #FFF;
--mf-header-color: #000;
--mf-cell-color: #000;
--mf-cell-bg: #F9F9F9;
--mf-table-bg: #FFF;
--mf-title-color: #000;
--mf-main-color: #039BE5;
--mf-image-height: 30px;
--mf-pagination-button-bg: #FFF;
--mf-pagination-button-hover: #039BE5;
--mf-pagination-button-color: #000;
--mf-pagination-button-active: #039BE5;
--mf-pagination-button-active-color: #FFF;
}
</style>
Personalizzazione
Il widget supporta la completa personalizzazione tramite variabili CSS.
Ecco alcune opzioni disponibili:
CSS Variable | Description |
| Font utilizzato nel widget |
| Colore del bordo della tabella |
| Colore di sfondo/testo dell'intestazione |
| Colore di sfondo/testo delle celle |
| Stile dei pulsanti di impaginazione |
Note sull'utilizzo
L'attributo
items-per-page="12"definisce il numero di righe visibili per pagina.Il widget viene caricato in modo asincrono tramite lo script esterno widget.min.js.
Assicurati che questo codice sia inserito in un contesto HTML valido, ad esempio in un blocco HTML del tuo CMS o sezione personalizzata.
Nota:
La lista di compatibilità è disponibile anche sul sito web: myflasher.com