Come visualizzare la lista di compatibilità del One sul tuo sito web?

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
`--mf-font`	Font utilizzato nel widget
`--mf-border-color`	Colore del bordo della tabella
`--mf-header-bg / --mf-header-color`	Colore di sfondo/testo dell'intestazione
`--mf-cell-bg / --mf-cell-color`	Colore di sfondo/testo delle celle
`--mf-pagination-button-*`	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