UNPKG

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