breakpoint

La función breakpoint está diseñada para determinar el breakpoint de la página.

mdui ofrece 6 breakpoints: xs, sm, md, lg, xl, xxl. Sus valores predeterminados se pueden consultar en la página de Design Tokens. Puedes usar esta función para determinar si el ancho de la página es mayor, menor, igual o diferente a un breakpoint especificado, o si está dentro de un rango de breakpoints especificado.

Uso

Importa la función cuando lo necesites:

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

Uso:

const breakpointCondition = breakpoint();

// Determina si el breakpoint actual de la página es mayor que sm
breakpointCondition.up('sm');

// Determina si el breakpoint actual de la página es menor que lg
breakpointCondition.down('lg');

// Determina si el breakpoint actual de la página es igual a md
breakpointCondition.only('md');

// Determina si el breakpoint actual de la página es diferente de xl
breakpointCondition.not('xl');

// Determina si el breakpoint actual de la página está entre sm y lg
breakpointCondition.between('sm', 'lg');

API

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

Esta función devuelve un objeto breakpointCondition. El comportamiento de la función depende del tipo de parámetro pasado:

• Si no se pasa ningún parámetro, devuelve un objeto breakpointCondition para el ancho actual de la página.
• Si se pasa un valor numérico, devuelve un objeto breakpointCondition para el ancho especificado.
• Si se pasa un selector CSS, devuelve un objeto breakpointCondition para el ancho del elemento correspondiente al selector.
• Si se pasa un elemento HTML, devuelve un objeto breakpointCondition para el ancho de ese elemento.
• Si se pasa un objeto JQ, devuelve un objeto breakpointCondition para el ancho del elemento dentro del objeto JQ.

Breakpoint

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

breakpointCondition

{
  /**
   * Si el ancho actual es mayor que el valor del breakpoint especificado
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Si el ancho actual es menor que el valor del breakpoint especificado
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Si el ancho actual está dentro del valor del breakpoint especificado
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Si el ancho actual no está dentro del valor del breakpoint especificado
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Si el ancho actual está entre los valores de los breakpoints especificados
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}