Vai al contenuto principale

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

Tommaso Monte avatar
Scritto da Tommaso Monte
Aggiornato oltre 3 settimane fa

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?