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
;
And use the middleware
Vue;
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.
;
And use the middleware
Vue;
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 |