breakpoint

Funkce breakpoint slouží k určení breakpointu stránky.

mdui poskytuje šest breakpointů: xs, sm, md, lg, xl, xxl. Jejich výchozí hodnoty naleznete na stránce Designové tokeny. Tuto funkci můžete použít k určení, zda je šířka stránky větší, menší, rovna nebo nerovná určenému breakpointu, nebo zda je v určeném rozsahu breakpointů.

Způsob použití

Importujte funkci podle potřeby:

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

Příklad použití:

const breakpointCondition = breakpoint();

// Zjistit, zda je aktuální breakpoint stránky větší než sm
breakpointCondition.up('sm');

// Zjistit, zda je aktuální breakpoint stránky menší než lg
breakpointCondition.down('lg');

// Zjistit, zda je aktuální breakpoint stránky roven md
breakpointCondition.only('md');

// Zjistit, zda je aktuální breakpoint stránky není roven xl
breakpointCondition.not('xl');

// Zjistit, zda je aktuální breakpoint stránky mezi sm a lg
breakpointCondition.between('sm', 'lg');

API

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

Tato funkce vrací objekt breakpointCondition. Chování funkce závisí na typu předaného parametru:

• Pokud není předán žádný parametr, vrátí objekt breakpointCondition pro aktuální šířku stránky.
• Pokud je předáno číslo, vrátí objekt breakpointCondition pro zadanou šířku.
• Pokud je předán CSS selektor, vrátí objekt breakpointCondition pro šířku prvku odpovídajícího tomuto selektoru.
• Pokud je předán HTML prvek, vrátí objekt breakpointCondition pro šířku tohoto prvku.
• Pokud je předán JQ objekt, vrátí objekt breakpointCondition pro šířku prvku v tomto JQ objektu.

Breakpoint

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

breakpointCondition

{
  /**
   * Zda je aktuální šířka větší než zadaná hodnota breakpointu
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Zda je aktuální šířka menší než zadaná hodnota breakpointu
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Zda je aktuální šířka v rámci zadané hodnoty breakpointu
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Zda aktuální šířka není v rámci zadané hodnoty breakpointu
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Zda je aktuální šířka mezi zadanými hodnotami breakpointů
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}