ionic-framework
Estensioni Ionic AngularJS

Osservazioni

Input di forma

Gli input ionici non sono diversi dai normali input HTML, ma hanno uno stile diverso e sono usati come una direttiva. Puoi anche utilizzare i normali input HTML nelle app Ionic. Ecco alcuni esempi di base che Ionic offre pronto all'uso.

casella di controllo:

<ion-checkbox ng-model="checkbox">Label</ion-checkbox>

Pulsante di opzione:

<ion-radio ng-model="radio" ng-value="'radiovalue'">Value</ion-radio>

Toggle:

<ion-toggle ng-model="toggle" toggle-class="toggle-calm">Toggle</ion-toggle>

Finestre modali

Ionic ha la propria estensione per la visualizzazione di una finestra modale. I modali possono essere creati inserendo il modello direttamente nella vista con un tag <script> o utilizzando un file modello separato. In questo esempio stiamo assumendo che tu abbia un file html chiamato modal-template.html in una cartella chiamata templates . Si imposta il percorso del modello nella funzione di inizializzazione modale con fromTemplateUrl .

Creazione dell'oggetto modale nell'ambito

HTML

<ion-modal-view>
  <ion-header-bar>
    <h1>Modal title</h1>
  </ion-header-bar>
  <ion-content>
    <p>Modal content</p>
  </ion-content>
</ion-modal-view> 

controllore

$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
});

Controlla il modale

È quindi possibile controllare il modale con i seguenti comandi.

Apri modale

$scope.modal.show();

Chiudi modale

$scope.modal.hide();

Rimuovi modale

$scope.modal.remove();

Eventi modali

È possibile ascoltare gli eventi modali con le seguenti funzioni.

Il modale è nascosto

$scope.$on('modal.hidden', function() {
  // Do something when modal is hidden
});

Il modale è stato rimosso

$scope.$on('modal.removed', function() {
  // Do something when modal is removed
});