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