2.0.0 • Published 6 years ago
nativescript-twitterbang v2.0.0
TwitterBang Usage
Installation
tns plugin add nativescript-twitterbang
Notice
As of version 2.0.0, the native library has been updated and the plugin, the API is brand new and breaking.
The TwitterBang
is not a layout container, similar to StackLayout, GridLayout
so you can place some UI inside the TwitterBang
layout. You have to be careful with the layout sizing/position or the animation will be 'jumpy' because of the actual layout size. See the demo markup, usually some alignment of the inner content will solve any 'jumpy' animation by centering the inner content.
Usage
XML:
<GridLayout rows="auto" columns="*, auto">
<Label col="0" text="Tap the heart >>>" textWrap="true" />
<TB:TwitterBang col="1" tap="{{ bangThis }}" dotColors="#ff4801,#ff3493,#ff4081,#ff9927">
<image src="~/images/greyHeart.png" class="center" stretch="none" />
</TB:TwitterBang>
</GridLayout>
TS:
import { TwitterBang } from 'nativescript-twitterbang';
// args.object is the View/component that triggered the tap event
public bangThis(args) {
const tb = args.object as TwitterBang;
tb.bang().then(() => {
console.log('do something after the effect');
})
}
JS:
// args.object is the View/component that triggered the tap event
export function bangThis(args) {
const x = args.object;
x.bang().then(function() {
console.log('after the bang');
});
}