Breakpoints

Breakpoints 支持在多种场景下使用断点。

自定义 Breakpoints

Breakpoints 可在您的主题配置 theme.breakpoints 部分定义：


import { defineTheme } from '@nex-ui/react'
 
const theme = defineTheme({
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
  },
})

Breakpoint 值的类型为 string。

TypeScript

之后，如果您正在使用 TypeScript，可通过 Module Augmentation 扩展自定义的 Breakpoints。


declare module '@nex-ui/react' {
  interface BreakpointsOverrides {
    sm: '640px'
    md: '768px'
    lg: '1024px'
    xl: '1280px'
  }
}

使用 Breakpoints

在响应式设计了解如何使用 Breakpoints。

默认可用的 Breakpoints

Breakpoint	Screen Width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px