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;
}