UNPKG

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