breakpoint

La fonction breakpoint sert à déterminer le point de rupture adapté à la largeur de la page.

mdui fournit six points de rupture : xs, sm, md, lg, xl, xxl. Leurs valeurs par défaut sont disponibles sur la page Design Tokens. Vous pouvez utiliser cette fonction pour vérifier si la largeur de la page est supérieure, inférieure, égale, différente d'un point de rupture spécifié, ou si elle se situe dans une plage de points de rupture.

Utilisation

Importez la fonction selon vos besoins :

import { breakpoint } from 'mdui/functions/breakpoint.js';

Exemple d'utilisation :

const breakpointCondition = breakpoint();

// Vérifie si le Breakpoint actuel est supérieur à sm
breakpointCondition.up('sm');

// Vérifie si le Breakpoint actuel est inférieur à lg
breakpointCondition.down('lg');

// Vérifie si le Breakpoint actuel est égal à md
breakpointCondition.only('md');

// Vérifie si le Breakpoint actuel est différent de xl
breakpointCondition.not('xl');

// Vérifie si le Breakpoint actuel se situe entre sm et lg
breakpointCondition.between('sm', 'lg');

API

breakpoint(width?: number | string | HTMLElement | JQ<HTMLElement>): breakpointCondition

Cette fonction retourne un objet breakpointCondition. Le comportement dépend du type du paramètre :

• Si aucun paramètre n'est fourni, retourne un objet pour la largeur actuelle de la page.
• Si une valeur numérique est fournie, retourne un objet pour cette largeur.
• Si un sélecteur CSS est fourni, retourne un objet pour la largeur de l'élément correspondant.
• Si un élément HTML est fourni, retourne un objet pour la largeur de cet élément.
• Si un objet JQ est fourni, retourne un objet pour la largeur de l'élément contenu dans l'objet JQ.

Breakpoint

type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

breakpointCondition

{
  /**
   * Vérifie si la largeur actuelle est supérieure au Breakpoint spécifié.
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Vérifie si la largeur actuelle est inférieure au Breakpoint spécifié.
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Vérifie si la largeur actuelle correspond au Breakpoint spécifié.
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Vérifie si la largeur actuelle ne correspond pas au Breakpoint spécifié.
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Vérifie si la largeur actuelle se situe entre les deux Breakpoints spécifiés.
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}