1 | import { ComponentType } from 'react'
|
2 | import { StandardProps } from './common'
|
3 | import { StyleProp, ViewStyle } from 'react-native'
|
4 |
|
5 | interface ViewProps extends StandardProps {
|
6 | /** 指定按下去的样式类。当 `hover-class="none"` 时,没有点击态效果
|
7 | * @default none
|
8 | * @supported weapp, swan, alipay, tt, h5
|
9 | * @rn 由于 RN 不支持 Class,故 RN 端的 View 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。
|
10 | */
|
11 | hoverClass?: string
|
12 |
|
13 | /** 由于 RN 不支持 Class,故 RN 端的 View 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。
|
14 | * @default none
|
15 | * @supported rn
|
16 | */
|
17 | hoverStyle?: StyleProp<ViewStyle>
|
18 |
|
19 | /** 指定是否阻止本节点的祖先节点出现点击态
|
20 | * @default false
|
21 | * @supported weapp, swan, alipay, tt
|
22 | */
|
23 | hoverStopPropagation?: boolean
|
24 |
|
25 | /** 按住后多久出现点击态,单位毫秒
|
26 | * @default 50
|
27 | * @supported weapp, swan, alipay, tt, h5, rn
|
28 | */
|
29 | hoverStartTime?: number
|
30 |
|
31 | /** 手指松开后点击态保留时间,单位毫秒
|
32 | * @default 400
|
33 | * @supported weapp, swan, alipay, tt, h5, rn
|
34 | */
|
35 | hoverStayTime?: number
|
36 |
|
37 | /** 是否以 catch 的形式绑定 touchmove 事件 */
|
38 | catchMove?: boolean
|
39 | }
|
40 |
|
41 | /** 视图容器
|
42 | * @classification viewContainer
|
43 | * @supported weapp, swan, alipay, tt, h5, rn
|
44 | * @example_react
|
45 | * ```tsx
|
46 | * export default class PageView extends Component {
|
47 | * constructor() {
|
48 | * super(...arguments)
|
49 | * }
|
50 | *
|
51 | * render() {
|
52 | * return (
|
53 | * <View className='components-page'>
|
54 | * <Text>flex-direction: row 横向布局</Text>
|
55 | * <View className='flex-wrp' style='flex-direction:row;'>
|
56 | * <View className='flex-item demo-text-1'/>
|
57 | * <View className='flex-item demo-text-2'/>
|
58 | * <View className='flex-item demo-text-3'/>
|
59 | * </View>
|
60 | * <Text>flex-direction: column 纵向布局</Text>
|
61 | * <View className='flex-wrp' style='flex-direction:column;'>
|
62 | * <View className='flex-item flex-item-V demo-text-1'/>
|
63 | * <View className='flex-item flex-item-V demo-text-2'/>
|
64 | * <View className='flex-item flex-item-V demo-text-3'/>
|
65 | * </View>
|
66 | * </View>
|
67 | * )
|
68 | * }
|
69 | * }
|
70 | * ```
|
71 | * @example_vue
|
72 | * ```html
|
73 | * <template>
|
74 | * <view class="components-page">
|
75 | * <text>flex-direction: row 横向布局</text>
|
76 | * <view class="flex-wrp flex-wrp-row" hover-class="hover" >
|
77 | * <view class="flex-item demo-text-1" :hover-stop-propagation="true" />
|
78 | * <view class="flex-item demo-text-2" hover-start-time="1000" hover-class="hover" />
|
79 | * <view class="flex-item demo-text-3" hover-stayTime="1000" hover-class="hover" />
|
80 | * </view>
|
81 | * <text>flex-direction: column 纵向布局</text>
|
82 | * <view class="flex-wrp flex-wrp-column">
|
83 | * <view class="flex-item flex-item-V demo-text-1" />
|
84 | * <view class="flex-item flex-item-V demo-text-2" />
|
85 | * <view class="flex-item flex-item-V demo-text-3" />
|
86 | * </view>
|
87 | * </view>
|
88 | * </template>
|
89 | *
|
90 | * <style>
|
91 | * .flex-wrp { display: flex; }
|
92 | * .flex-wrp-column{ flex-direction: column; }
|
93 | * .flex-wrp-row { flex-direction:row; padding: 20px; background: #f1f1f1; }
|
94 | * .flex-item { width: 180px; height: 90px; }
|
95 | * .demo-text-1 { background: #ccc; }
|
96 | * .demo-text-2 { background: #999; }
|
97 | * .demo-text-3 { background: #666; }
|
98 | * .hover {
|
99 | * background: #000;
|
100 | * }
|
101 | * </style>
|
102 | * ```
|
103 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/view.html
|
104 | */
|
105 | declare const View: ComponentType<ViewProps>
|
106 |
|
107 | export { View, ViewProps }
|