breakpoint

breakpoint fonksiyonu, sayfanın breakpoint'lerini (kırılma noktalarını) belirlemek için kullanılır.

mdui, şu 6 breakpoint'i sağlar: xs, sm, md, lg, xl, xxl. Varsayılan değerleri Design Tokens sayfasında görülebilir. Bu fonksiyonu, sayfa genişliğinin belirtilen breakpoint'ten büyük, küçük, eşit veya eşit olmadığını veya belirtilen breakpoint aralığında olup olmadığını kontrol etmek için kullanabilirsiniz.

Kullanım

Fonksiyonu ihtiyacınıza göre içe aktarın:

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

Kullanım örneği:

const breakpointCondition = breakpoint();

// Geçerli sayfa breakpoint'inin sm'den büyük olup olmadığını kontrol eder
breakpointCondition.up('sm');

// Geçerli sayfa breakpoint'inin lg'den küçük olup olmadığını kontrol eder
breakpointCondition.down('lg');

// Geçerli sayfa breakpoint'inin md'ye eşit olup olmadığını kontrol eder
breakpointCondition.only('md');

// Geçerli sayfa breakpoint'inin xl'e eşit olmadığını kontrol eder
breakpointCondition.not('xl');

// Geçerli sayfa breakpoint'inin sm ve lg arasında olup olmadığını kontrol eder
breakpointCondition.between('sm', 'lg');

API

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

Bu fonksiyon bir breakpointCondition nesnesi döndürür. Fonksiyonun davranışı, iletilen parametrenin türüne bağlıdır:

• Parametre iletilmezse, geçerli sayfa genişliği için bir breakpointCondition nesnesi döndürür.
• Sayısal bir değer iletilirse, belirtilen genişlik için bir breakpointCondition nesnesi döndürür.
• Bir CSS seçici iletilirse, bu seçiciyle eşleşen öğenin genişliği için bir breakpointCondition nesnesi döndürür.
• Bir HTML öğesi iletilirse, bu öğenin genişliği için bir breakpointCondition nesnesi döndürür.
• Bir JQ nesnesi iletilirse, bu JQ nesnesindeki öğelerin genişliği için bir breakpointCondition nesnesi döndürür.

Breakpoint

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

breakpointCondition

{
  /**
   * Geçerli genişlik, belirtilen breakpoint değerinden büyük mü?
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * Geçerli genişlik, belirtilen breakpoint değerinden küçük mü?
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * Geçerli genişlik, belirtilen breakpoint değeri içinde mi?
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * Geçerli genişlik, belirtilen breakpoint değeri içinde değil mi?
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * Geçerli genişlik, belirtilen breakpoint değerleri arasında mı?
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}