Ionic 2 Native 3DTouch
Ionic 2 Native 3DTouch– Install cordova-plugin-3dtouch plugin to use the native 3DTouch feature. 3DTouch is only supported in IOS platform. Here in this tutorial we are going to explain how you can use Ionic 2 Native 3DTouch in IOS.
Ionic 2 Native 3DTouch Example
You can install the 3DTouch plugin simply as below-
Installation
3DTouch Plugin Installation Syntax:
$ ionic plugin add cordova-plugin-3dtouch |
3DTouch Example
After Installing the 3DTouch plugin you can use it. Here is an example of Native 3DTouch.-
Ionic 2 Native 3DTouch Example:
import { ThreeDeeTouch } from 'ionic-native';
// import for type completion on variables
import { ThreeDeeTouchQuickAction, ThreeDeeTouchForceTouch } from 'ionic-native';
ThreeDeeTouch.isAvailable().then(isAvailable => console.log("3D Touch available? " + isAvailable));
ThreeDeeTouch.watchForceTouches()
.subscribe(
(data: ThreeDeeTouchForceTouch) => {
console.log("Force touch %" + data.force);
console.log("Force touch timestamp: " + data.timestamp);
console.log("Force touch x: " + data.x);
console.log("Force touch y: " + data.y);
}
);
let actions: Array<ThreeDeeTouchQuickAction> = [
{
type: 'checkin',
title: 'Check in',
subtitle: 'Quickly check in',
iconType: 'Compose'
},
{
type: 'share',
title: 'Share',
subtitle: 'Share like you care',
iconType: 'Share'
},
{
type: 'search',
title: 'Search',
iconType: 'Search'
},
{
title: 'Show favorites',
iconTemplate: 'HeartTemplate'
}
];
ThreeDeeTouch.configureQuickActions(actions);
ThreeDeeTouch.onHomeIconPressed().subscribe(
(payload) => {
// returns an object that is the button you presed
console.log('Pressed the ${payload.title} button')
console.log(payload.type)
}
)
|
Supported Platforms
This feature is only supported in IOS.
Static Methods
Following static methods are available-
- 1. isAvailable
- 2. watchForceTouches
- 3. configureQuickActions
- 4. onHomeIconPressed
- 5. enableLinkPreview
- 6. disableLinkPreview
Advertisements
Add Comment
📖 Read More
- 1. Ionic 2 Android Fingerprint Auth
- 2. Ionic 2 Android Full Screen
- 3. Ionic 2 Check App Availability



