breakpoint

该函数用于判断页面的断点。

mdui 提供了 6 个断点,分别为:xssmmdlgxlxxl。其默认值可在 设计令牌 页面查看。你可以使用此函数来判断页面宽度是否大于、小于、等于、不等于指定的断点,或者是否在指定的断点范围内。

使用方法

按需导入函数:

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;
}
MDUI文档English简体中文亮色模式暗色模式跟随系统
预设颜色
自选颜色
从壁纸提取颜色
请选择一张壁纸
开发指南
概述 安装 快速入门 TypeScript 支持 IDE 支持 本地化 常见问题
样式
暗色模式 动态配色 文章排版 设计令牌
与框架集成
React Vue Angular
组件
Button 按钮ButtonIcon 图标按钮Fab 浮动操作按钮SegmentedButton 分段按钮Chip 纸片Card 卡片Checkbox 复选框Radio 单选框Switch 开关切换Slider 滑块RangeSlider 范围滑块List 列表Collapse 折叠面板Tabs 选项卡Dropdown 下拉组件Menu 菜单Select 选择框TextField 文本框LinearProgress 线性进度指示器CircularProgress 圆形进度指示器Dialog 对话框Divider 分割线Avatar 头像Badge 徽标Icon 图标Tooltip 工具提示Snackbar 消息条NavigationBar 底部导航栏NavigationDrawer 侧边抽屉栏NavigationRail 侧边导航栏BottomAppBar 底部应用栏TopAppBar 顶部应用栏Layout 布局
工具函数
jq 工具库 dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
独立包
@mdui/icons 图标组件库