breakpoint

A função breakpoint é usada para determinar os breakpoints da página.

mdui fornece 6 breakpoints: xs, sm, md, lg, xl, xxl. Seus valores padrão podem ser encontrados na página Design tokens. Você pode usar esta função para verificar se a largura da página é maior, menor, igual ou diferente de um breakpoint especificado, ou se está dentro de um intervalo de breakpoints.

Como usar

Importe a função conforme necessário:

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

Exemplo de uso:

const breakpointCondition = breakpoint();

// Verifica se o breakpoint atual da página é maior que sm
breakpointCondition.up('sm');

// Verifica se o breakpoint atual da página é menor que lg
breakpointCondition.down('lg');

// Verifica se o breakpoint atual da página é igual a md
breakpointCondition.only('md');

// Verifica se o breakpoint atual da página é diferente de xl
breakpointCondition.not('xl');

// Verifica se o breakpoint atual da página está entre sm e lg
breakpointCondition.between('sm', 'lg');

API

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

Esta função retorna um objeto breakpointCondition. O comportamento da função depende do tipo do parâmetro passado:

• Se nenhum parâmetro for passado, retorna o objeto breakpointCondition para a largura atual da página.
• Se um valor numérico for passado, retorna o objeto breakpointCondition para a largura especificada.
• Se um seletor CSS for passado, retorna o objeto breakpointCondition para a largura do elemento correspondente ao seletor.
• Se um elemento HTML for passado, retorna o objeto breakpointCondition para a largura desse elemento.
• Se um objeto JQ for passado, retorna o objeto breakpointCondition para a largura do elemento dentro desse objeto JQ.

Breakpoint

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

breakpointCondition

{
  /**
   * Se a largura atual é maior que o valor do breakpoint especificado
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Se a largura atual é menor que o valor do breakpoint especificado
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Se a largura atual está dentro do valor do breakpoint especificado
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Se a largura atual não está dentro do valor do breakpoint especificado
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Se a largura atual está entre os valores dos breakpoints especificados
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}