breakpoint

Die breakpoint-Funktion ermittelt den Breakpoint der Seite.

mdui bietet 6 Breakpoints: xs, sm, md, lg, xl, xxl. Die Standardwerte können auf der Seite Design-Tokens eingesehen werden. Mit dieser Funktion prüfen Sie, ob die Seitenbreite größer, kleiner, gleich oder ungleich einem angegebenen Breakpoint ist oder ob sie innerhalb eines angegebenen Breakpoint-Bereichs liegt.

Verwendung

Importieren Sie die Funktion nach Bedarf:

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

Beispiel:

const breakpointCondition = breakpoint();

// Prüfen, ob der aktuelle Seiten-Breakpoint größer als sm ist
breakpointCondition.up('sm');

// Prüfen, ob der aktuelle Seiten-Breakpoint kleiner als lg ist
breakpointCondition.down('lg');

// Prüfen, ob der aktuelle Seiten-Breakpoint gleich md ist
breakpointCondition.only('md');

// Prüfen, ob der aktuelle Seiten-Breakpoint nicht gleich xl ist
breakpointCondition.not('xl');

// Prüfen, ob der aktuelle Seiten-Breakpoint zwischen sm und lg liegt
breakpointCondition.between('sm', 'lg');

API

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

Diese Funktion gibt ein breakpointCondition-Objekt zurück. Das Verhalten der Funktion hängt vom Typ des übergebenen Parameters ab:

• Wenn kein Parameter übergeben wird, wird ein breakpointCondition-Objekt für die aktuelle Seitenbreite zurückgegeben.
• Wenn ein numerischer Wert übergeben wird, wird ein breakpointCondition-Objekt für die angegebene Breite zurückgegeben.
• Wenn ein CSS-Selektor übergeben wird, wird ein breakpointCondition-Objekt für die Breite des Elements zurückgegeben, das dem Selektor entspricht.
• Wenn ein HTML-Element übergeben wird, wird ein breakpointCondition-Objekt für die Breite dieses Elements zurückgegeben.
• Wenn ein JQ-Objekt übergeben wird, wird ein breakpointCondition-Objekt für die Breite des Elements in diesem JQ-Objekt zurückgegeben.

Breakpoint

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

breakpointCondition

{
  /**
   * Ob die aktuelle Breite größer als der angegebene Breakpoint-Wert ist
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Ob die aktuelle Breite kleiner als der angegebene Breakpoint-Wert ist
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Ob die aktuelle Breite innerhalb des angegebenen Breakpoint-Werts liegt
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Ob die aktuelle Breite nicht innerhalb des angegebenen Breakpoint-Werts liegt
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Ob die aktuelle Breite zwischen den angegebenen Breakpoint-Werten liegt
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}