- Le site officiel de la librairies breakpoint helper
- Le dépôt Github
- Une démo et son code source
- Une page de tests
Base de l’initialisation du helper
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import bph from 'breakpoint-helper'; // UIkit v3.6.19 CSS breakpoints // $breakpoint-small: 640px !default; // $breakpoint-medium: 960px !default; // $breakpoint-large: 1200px !default; // $breakpoint-xlarge: 1600px !default; const instance = bph({ small: '640px', medium: '960px', large: '1200px', xlarge: '1600px', }); |
Utiliser la méthode listen() avec un breakpoint unique
(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.
La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const { listen } = instance; const currentBreakpoint = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Execute code for Mobile devices console.log('Current breakpoint is: (max-width: 1199px)'); } else { // Execute code for Desktop devices console.log('Current breakpoint is: (min-width: 1200px)'); } } ); |
Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint
Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const bpMobile = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Mobile!'); } else { // Nettoyer console.log('DESTROY code for: Mobile!'); } } ); const bpDesktop = listen('large', ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Desktop!'); } else { // Nettoyer console.log('DESTROY code for: Desktop!'); } }); |