@hippy4tv/vue-native-components

Hippy Vue Native components for TV

Usage no npm install needed!

<script type="module">
  import hippy4tvVueNativeComponents from 'https://cdn.skypack.dev/@hippy4tv/vue-native-components';
</script>

README

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

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