breakpoint

This function is designed to determine page breakpoints.

mdui provides 6 breakpoints: xs, sm, md, lg, xl, and xxl. Default values can be found on the Design Tokens page. This function allows you to check if the current page width is greater than, less than, equal to, not equal to 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. The behavior of the function depends on the type of the parameter passed:

• 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 within the specified breakpoint.
   */
  only(breakpoint: Breakpoint): boolean;

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

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