breakpoint

La funzione breakpoint determina i breakpoint della pagina.

mdui fornisce 6 breakpoint: xs, sm, md, lg, xl e xxl. I valori predefiniti si trovano nella pagina Design Tokens. Questa funzione consente di verificare se la larghezza corrente della pagina è superiore, inferiore, uguale o diversa da un breakpoint specificato, o all'interno di un intervallo specificato.

Utilizzo

Importa la funzione:

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

Esempio:

const breakpointCondition = breakpoint();

// Verifica se il breakpoint della pagina corrente è maggiore di 'sm'
breakpointCondition.up('sm');

// Verifica se il breakpoint della pagina corrente è minore di 'lg'
breakpointCondition.down('lg');

// Verifica se il breakpoint della pagina corrente è uguale a 'md'
breakpointCondition.only('md');

// Verifica se il breakpoint della pagina corrente non è uguale a 'xl'
breakpointCondition.not('xl');

// Verifica se il breakpoint della pagina corrente è compreso tra 'sm' e 'lg'
breakpointCondition.between('sm', 'lg');

API

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

Questa funzione restituisce un oggetto breakpointCondition. Il suo comportamento dipende dal tipo di argomento che si passa:

• Se non viene passato alcun parametro, restituisce la breakpointCondition per la larghezza corrente della pagina.
• Se viene passato un numero, restituisce la breakpointCondition per la larghezza specificata.
• Se viene passato un selettore CSS, restituisce la breakpointCondition per la larghezza dell'elemento corrispondente.
• Se viene passato un elemento HTML, restituisce la breakpointCondition per la larghezza dell'elemento specificato.
• Se viene passato un oggetto JQ, restituisce la breakpointCondition per la larghezza dell'elemento all'interno dell'oggetto JQ.

Breakpoint

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

breakpointCondition

{
  /**
   * Verifica se la larghezza corrente è maggiore del breakpoint specificato.
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Verifica se la larghezza corrente è minore del breakpoint specificato.
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Verifica se la larghezza corrente è compresa nel breakpoint specificato.
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Verifica se la larghezza corrente non è compresa nel breakpoint specificato.
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Verifica se la larghezza corrente è compresa tra i breakpoint specificati.
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}