breakpoint

A breakpoint függvény az oldal töréspontjainak (breakpoint) meghatározására szolgál.

Az mdui 6 töréspontot biztosít: xs, sm, md, lg, xl, xxl. Alapértelmezett értékeik a Design token oldalon tekinthetők meg. Ezzel a függvénnyel meghatározhatja, hogy az oldal szélessége nagyobb-e, kisebb-e, egyenlő-e, nem egyenlő-e egy adott töréspontnál, vagy egy adott töréspont-tartományban van-e.

Használat

A függvény importálása:

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

Példa:

const breakpointCondition = breakpoint();

// Meghatározza, hogy az aktuális oldal töréspontja nagyobb-e, mint sm
breakpointCondition.up('sm');

// Meghatározza, hogy az aktuális oldal töréspontja kisebb-e, mint lg
breakpointCondition.down('lg');

// Meghatározza, hogy az aktuális oldal töréspontja egyenlő-e md-vel
breakpointCondition.only('md');

// Meghatározza, hogy az aktuális oldal töréspontja nem egyenlő-e xl-lel
breakpointCondition.not('xl');

// Meghatározza, hogy az aktuális oldal töréspontja sm és lg között van-e
breakpointCondition.between('sm', 'lg');

API

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

A függvény egy breakpointCondition objektumot ad vissza. A függvény viselkedése a paraméter típusától függ:

• Ha nem ad meg paramétert, az aktuális oldalszélesség breakpointCondition objektumát adja vissza.
• Ha számot ad meg, a megadott szélesség breakpointCondition objektumát adja vissza.
• Ha CSS szelektort ad meg, a szelektor által kiválasztott elem szélességének breakpointCondition objektumát adja vissza.
• Ha HTML elemet ad meg, az adott elem szélességének breakpointCondition objektumát adja vissza.
• Ha JQ objektumot ad meg, a JQ objektumban lévő elem szélességének breakpointCondition objektumát adja vissza.

Töréspont

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

breakpointCondition

{
  /**
   * Az aktuális szélesség nagyobb-e a megadott töréspont értéknél
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Az aktuális szélesség kisebb-e a megadott töréspont értéknél
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Az aktuális szélesség a megadott töréspont-értéken belül van-e
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Az aktuális szélesség nincs a megadott töréspont-értéken belül
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Az aktuális szélesség a megadott töréspont-értékek között van-e
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}