2.0.0 • Published 4 years ago

hippy-vue-native-components v2.0.0

Weekly downloads
2
License
Apache-2.0
Repository
github
Last release
4 years ago

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).

Hippy Group

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

ComponentNameNative component mappingRegister MiddlewareDescription
anmiationAnimation/AnimationSetAnimationComponentAnimation component
dialogModalModalComponentNative modal
ul-refresh-wrapperRefreshWrapperViewListRefreshComponentWrap the ul to pull refresh
ul-refreshRefreshWrapperItemViewListRefreshComponentContents in pull down area
swiperViewPagerSwiperComponentSlider
swiper-slideViewPagerItemSwiperComponentSlider Page