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;
}
MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons