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