breakpoint

breakpoint 函式用來判斷頁面的斷點。

mdui 提供了 6 個斷點，分別為：xs、sm、md、lg、xl、xxl。其預設值可在 設計令牌 頁面查看。你可以使用此函式來判斷頁面寬度是否大於、小於、等於、不等於指定的斷點，或者是否在指定的斷點範圍內。

使用方式

按需引入函式：

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

使用範例：

const breakpointCondition = breakpoint();

// 判斷目前頁面斷點是否大於 sm
breakpointCondition.up('sm');

// 判斷目前頁面斷點是否小於 lg
breakpointCondition.down('lg');

// 判斷目前頁面斷點是否等於 md
breakpointCondition.only('md');

// 判斷目前頁面斷點是否不等於 xl
breakpointCondition.not('xl');

// 判斷目前頁面斷點是否在 sm 和 lg 之間
breakpointCondition.between('sm', 'lg');

API

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

該函式回傳 breakpointCondition 物件。函式的行為取決於傳入的參數類型：

• 如果不傳入參數，將回傳目前頁面寬度的 breakpointCondition 物件。
• 如果傳入數值，將回傳指定寬度的 breakpointCondition 物件。
• 如果傳入 CSS 選擇器，將回傳該選擇器對應元素寬度的 breakpointCondition 物件。
• 如果傳入 HTML 元素，將回傳該元素寬度的 breakpointCondition 物件。
• 如果傳入 JQ 物件，將回傳該 JQ 物件中元素的寬度的 breakpointCondition 物件。

Breakpoint

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

breakpointCondition

{
  /**
   * 目前寬度是否大於指定斷點值
   */
  up(breakpoint: Breakpoint): boolean;

  /**
   * 目前寬度是否小於指定斷點值
   */
  down(breakpoint: Breakpoint): boolean;

  /**
   * 目前寬度是否在指定斷點值內
   */
  only(breakpoint: Breakpoint): boolean;

  /**
   * 目前寬度是否不在指定斷點值內
   */
  not(breakpoint: Breakpoint): boolean;

  /**
   * 目前寬度是否在指定斷點值之間
   */
  between(startBreakpoint: Breakpoint, endBreakpoint: Breakpoint): boolean;
}