UNPKG

2.19 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps } from './common'
3
4interface MatchMediaProps extends StandardProps {
5 /** 页面最小宽度（ px 为单位）
6 * @supported weapp
7 */
8 minWidth?: number
9
10 /** 页面最大宽度（ px 为单位）
11 * @supported weapp
12 */
13 maxWidth?: number
14
15 /** 页面宽度（ px 为单位）
16 * @supported weapp
17 */
18 width?: number
19
20 /** 页面最小高度（ px 为单位）
21 * @supported weapp
22 */
23 minHeight?: number
24
25 /** 页面最大高度（ px 为单位）
26 * @supported weapp
27 */
28 maxHeight?: number
29
30 /** 页面高度（ px 为单位）
31 * @supported weapp
32 */
33 height?: number
34
35 /** 屏幕方向（ landscape 或 portrait ）
36 * @supported weapp
37 */
38 orientation?: string
39}
40
41/** media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。
42 * 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
43 * @supported weapp
44 * @classification viewContainer
45 * @example_react
46 * ```tsx
47 * class App extends Components {
48 * render () {
49 * return (
50 * <View>
51 * <MatchMedia minWidth="300" maxWidth="600">
52 * <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
53 * </MatchMedia>
54 * <MatchMedia minHeight="400" orientation="landscape">
55 * <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
56 * </MatchMedia>
57 * </View>
58 * )
59 * }
60 * }
61 * ```
62 * @example_vue
63 * ```html
64 * <template>
65 * <view class="components-page">
66 * <match-media min-width="300" max-width="500">
67 * <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
68 * </match-media>
69 * <match-media min-height="400" orientation="landscape">
70 * <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
71 * </match-media>
72 * </view>
73 * </template>
74 * ```
75 * @see https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html
76 */
77declare const MatchMedia: ComponentType<MatchMediaProps>
78
79export { MatchMedia, MatchMediaProps }