Hippy Vue Native Components
The package contains the Native only components provide by Hippy. For web alternative could use
hippy-vue-web-components
(it's not exist yet).
How to use
Install
Install with tnpm.
tnpm install hippy-vue-native-components
Register components with the middleware
1. Register all of components
Point to the native entry, import the middleware
import HippyVueNativeComponents from 'hippy-vue-native-components';
And use the middleware
Vue.use(HippyVueNativeComponents);
2. Register specific component
Dialog component as the example, point to the native entry, import the specific middleware.
for more reigster, see the Register Middleware
column in Supported native components
table.
import { ModalComponent } from 'hippy-vue-native-components';
And use the middleware
Vue.use(ModalComponent);
Template usage
Dialog component as the example
<template>
<dialog
animationType="slide"
class="dialog-demo"
:supportedOrientations="supportedOrientations"
v-if="dialogIsVisible"
@show="onShow"
@requestClose="onClose">
<div class="dialog-demo-wrapper">
<div class="fullscreen center row">
<button @click="clickView" class="dialog-demo-close-btn center row">
<p class="dialog-demo-close-btn-text">Close</p>
</button>
</div>
</div>
</dialog>
</template>
Supported native components
ComponentName | Native component mapping | Register Middleware | Description |
---|---|---|---|
anmiation | Animation/AnimationSet | AnimationComponent | Animation component |
dialog | Modal | ModalComponent | Native modal |
ul-refresh-wrapper | RefreshWrapperView | ListRefreshComponent | Wrap the ul to pull refresh |
ul-refresh | RefreshWrapperItemView | ListRefreshComponent | Contents in pull down area |
swiper | ViewPager | SwiperComponent | Slider |
swiper-slide | ViewPagerItem | SwiperComponent | Slider Page |