breakpoint

Функция breakpoint используется для определения текущего брейкпоинта (breakpoint).

В mdui предусмотрено 6 брейкпоинтов: xs, sm, md, lg, xl, xxl. Их значения по умолчанию можно посмотреть на странице Дизайн-токены. С помощью этой функции вы можете проверить, больше ли текущая ширина заданного брейкпоинта, меньше ли, равна ли или не равна ему, а также находится ли она в указанном диапазоне.

Использование

Импортируйте функцию по мере необходимости:

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

Пример использования:

const breakpointCondition = breakpoint();

// Проверить, больше ли текущая ширина, чем sm
breakpointCondition.up('sm');

// Проверить, меньше ли текущая ширина, чем lg
breakpointCondition.down('lg');

// Проверить, равна ли текущая ширина md
breakpointCondition.only('md');

// Проверить, не равна ли текущая ширина xl
breakpointCondition.not('xl');

// Проверить, находится ли текущая ширина между sm и lg
breakpointCondition.between('sm', 'lg');

API

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

Функция возвращает объект breakpointCondition. Поведение функции зависит от типа переданного аргумента:

• Если аргумент не передан, возвращается объект breakpointCondition для текущей ширины страницы.
• Если передано число, возвращается объект breakpointCondition для указанной ширины.
• Если передан CSS-селектор, возвращается объект breakpointCondition для ширины элемента, соответствующего этому селектору.
• Если передан HTML-элемент, возвращается объект breakpointCondition для ширины этого элемента.
• Если передан JQ-объект, возвращается объект breakpointCondition для ширины элемента в этом JQ-объекте.

Breakpoint

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

breakpointCondition

{
  /**
   * Проверяет, больше ли текущая ширина указанного значения брейкпоинта
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Проверяет, меньше ли текущая ширина указанного значения брейкпоинта
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Проверяет, находится ли текущая ширина в пределах указанного брейкпоинта
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Проверяет, не находится ли текущая ширина в пределах указанного брейкпоинта
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Проверяет, находится ли текущая ширина между двумя указанными брейкпоинтами
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}