All geek questions in one place

Custom Notification Template with Ionic

I would like to display custom notifications that combine buttons (like music player controls) using an ionic structure, allowing the user to select when the notification is clicked.

I cannot find official (or unofficial) documentation about this, and I don’t even know if this is possible.

Has anyone successfully created an ion infrastructure custom notification template?

+4
source share
1 answer

I am using ionicPopup with a custom template.

Here is the code: http://codepen.io/nicon-dev/pen/EPYeGJ

or:

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicPopup) {

  $scope.openPopup = function() {

    var customTemplate =
      '<ion-toggle>enable</ion-toggle>' +
      '<label class="item item-input"><input type="text" placeholder="your address"></label>';

    $ionicPopup.show({
      template: customTemplate,
      title: 'alternative location',
      subTitle: 'select this option if GPS is unavailable',
      buttons: [{
        text: 'Cancel',
        //type: 'button-positive',
        onTap: function(e) {

        }
      }, {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          
        }
      }]
    });

  }
});
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Ionic Pull to Refresh</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

</head>

<body ng-controller="MyCtrl">

  <ion-header-bar class="bar-positive">
    <h1 class="title">Awesome App</h1>
  </ion-header-bar>

  <ion-content class="padding">
    <button class="button button-balanced" ng-click="openPopup()">open popup</button>
  </ion-content>

</body>

</html>
Run codeHide result

$ionicPopup docs:

, .

0

Source: https://habr.com/ru/post/1618262/

More articles:


All Articles