breakpoint

Funkcja breakpoint określa bieżący breakpoint strony.

mdui oferuje 6 breakpointów: xs, sm, md, lg, xl, xxl. Ich domyślne wartości można znaleźć na stronie Tokeny projektowe. Możesz użyć tej funkcji, aby sprawdzić, czy szerokość strony jest większa, mniejsza, równa, czy nie równa określonemu breakpointowi, lub czy mieści się w określonym zakresie breakpointów.

Sposób użycia

Zaimportuj funkcję:

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

Przykład użycia:

const breakpointCondition = breakpoint();

// Sprawdź, czy bieżący breakpoint strony jest większy niż sm
breakpointCondition.up('sm');

// Sprawdź, czy bieżący breakpoint strony jest mniejszy niż lg
breakpointCondition.down('lg');

// Sprawdź, czy bieżący breakpoint strony jest równy md
breakpointCondition.only('md');

// Sprawdź, czy bieżący breakpoint strony nie jest równy xl
breakpointCondition.not('xl');

// Sprawdź, czy bieżący breakpoint strony mieści się między sm a lg
breakpointCondition.between('sm', 'lg');

API

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

Funkcja zwraca obiekt breakpointCondition. Jej działanie zależy od typu przekazanego parametru:

• Jeśli nie przekażesz parametru, zwróci obiekt breakpointCondition dla bieżącej szerokości strony.
• Jeśli przekażesz wartość liczbową, zwróci obiekt breakpointCondition dla podanej szerokości.
• Jeśli przekażesz selektor CSS, zwróci obiekt breakpointCondition dla szerokości elementu wskazanego przez selektor.
• Jeśli przekażesz element HTML, zwróci obiekt breakpointCondition dla szerokości tego elementu.
• Jeśli przekażesz obiekt JQ, zwróci obiekt breakpointCondition dla szerokości elementu w tym obiekcie JQ.

Breakpoint

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

breakpointCondition

{
  /**
   * Czy bieżąca szerokość jest większa od wartości podanego breakpointu
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Czy bieżąca szerokość jest mniejsza od wartości podanego breakpointu
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Czy bieżąca szerokość mieści się w wartości podanego breakpointu
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Czy bieżąca szerokość nie mieści się w wartości podanego breakpointu
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Czy bieżąca szerokość mieści się między wartościami dwóch breakpointów
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}