Vai al contenuto principale

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

Tommaso Monte avatar
Scritto da Tommaso Monte
Aggiornato ieri

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

Hai ricevuto la risposta alla tua domanda?