Ce extrait de code intègre le widget de compatibilité dans une page web. Il permet d’afficher les informations de compatibilité des produits sous forme de tableau, avec une apparence personnalisable et une pagination.
Objectif
Le <compatibility-widget> affiche un tableau paginé et stylé, indiquant la compatibilité des produits. Il est conçu pour être intégré dans les pages produits ou support, afin d’aider les utilisateurs à identifier les appareils ou accessoires compatibles.
Extrait de code
<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>
Personnalisation
Le widget prend en charge une personnalisation complète du style via des variables CSS.
Exemple des options disponibles :
Variable CSS | Description |
--mf-font | Police utilisée dans le widget |
--mf-border-color | Couleur des bordures du tableau |
--mf-header-bg / --mf-header-color | Couleur de fond et du texte de l’en-tête |
--mf-cell-bg / --mf-cell-color | Couleur de fond et du texte des cellules |
--mf-pagination-button-* | Style des boutons de pagination |
Notes d’utilisation
items-per-page="12"définit le nombre de lignes affichées par page.Le widget est chargé de manière asynchrone via le script externe
widget.min.js.Assurez-vous que ce code soit inséré dans un contexte HTML valide (par exemple, dans un bloc CMS ou une section HTML).
Note :
La liste de compatibilité est également disponible sur le site myflasher.com