breakpoint

The breakpoint function checks the current page width against responsive breakpoints.

mdui provides six breakpoints: xs, sm, md, lg, xl, and xxl. Default values are listed on the Design Tokens page. This function lets you check whether the current page width is above, below, equal to, or different from a specified breakpoint, or within a specified range.

Usage

Import the function:

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

Example:

const breakpointCondition = breakpoint();

// Check if the current page breakpoint is greater than 'sm'
breakpointCondition.up('sm');

// Check if the current page breakpoint is less than 'lg'
breakpointCondition.down('lg');

// Check if the current page breakpoint is equal to 'md'
breakpointCondition.only('md');

// Check if the current page breakpoint is not equal to 'xl'
breakpointCondition.not('xl');

// Check if the current page breakpoint is between 'sm' and 'lg'
breakpointCondition.between('sm', 'lg');

API

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

This function returns a breakpointCondition object. Its behavior depends on the type of argument you pass:

• If no parameter is passed, it returns the breakpointCondition for the current page width.
• If a number is passed, it returns the breakpointCondition for the specified width.
• If a CSS selector is passed, it returns the breakpointCondition for the width of the corresponding element.
• If an HTML element is passed, it returns the breakpointCondition for the width of the specified element.
• If a JQ object is passed, it returns the breakpointCondition for the width of the element within the JQ object.

Breakpoint

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

breakpointCondition

{
  /**
   * Checks if the current width is greater than the specified breakpoint.
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Checks if the current width is less than the specified breakpoint.
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Checks if the current width is equal to the specified breakpoint.
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Checks if the current width is not equal to the specified breakpoint.
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Checks if the current width is between the specified breakpoints.
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}